Лекция в HTML Academy про align-content

Свойство justify-content управляет распределением флекс-элементов вдоль главной оси, а align-content — выравниванием рядов флекс-элементов вдоль поперечной оси. Оба свойства имеют схожие значения:

1. 1 flex-start
2. 2 flex-end
3. 3 center
4. 4 space-between
5. 5 stretch - доступно только для align-content и является значением по умолчанию.

Свойство align-content переопределяет значение align-items, которое управляет выравниванием отдельных флекс-элементов вдоль поперечной оси. Это происходит как для одного ряда флекс-элементов, так и для нескольких рядов.

Однако есть один нюанс: align-content перестаёт работать, если для флекс-контейнера установлено свойство flex-wrap: nowrap. Это происходит потому, что в таком случае высота строки равна высоте флекс-контейнера, и на поперечной оси не остаётся свободного пространства.

В результате align-content не может применяться. Вместо этого будут работать свойства align-items и align-self, если размеры флекс-элементов позволяют, и мы увидим результат их выравнивания.

Свойство align-content: stretch и align-items

Когда одновременно задаются свойства align-items и align-content, align-items не отключается полностью, а может влиять на отображение флекс-элементов внутри рядов.

Это особенно заметно, когда для align-content используется значение по умолчанию — stretch. В этом случае ряды флекс-элементов растягиваются, занимая всё доступное пространство поперечной оси, а оставшееся свободное место между рядами делится поровну.

Поведение строк при align-content: stretch зависит от значения align-items:

1. 1 Если align-items имеет значение stretch, элементы внутри строк растягиваются на всю высоту своей строки.

2. 2 Если значение align-items отлично от stretch, элементы внутри строк сжимаются под своё содержимое и выравниваются в строках в соответствии с заданным значением align-items (например, flex-start, center, flex-end и т.д.).

Таким образом, align-items продолжает влиять на выравнивание элементов внутри строк, даже если align-content установлено на stretch.

Свойство order, порядковый номер flex-элемента

Еще одно свойство - это order, которое определяет порядковый номер флекс-элемента.

.flex-element {
// этот элемент станет отображаться первым в контейнере
order: -1; 

По умолчанию порядковый номер флекс-элементов равен “0”, и они сортируются по возрастанию этого номера.

Это свойство очень полезно, так как позволяет изменять порядок следования флекс-элементов в потоке, не изменяя при этом HTML-код.