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

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

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

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

· Если значение отлично от stretch, то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items.

Остальные четыре значения свойства align-content аналогичны значениям свойства justify-content, отличается только ось:

· flex-start располагает ряды в начале поперечной оси.

· flex-end располагает ряды в конце поперечной оси.

· space-between равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.

· space-around равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.

Напоследок небольшое резюме.

Свойство align-content — «гибридное». Мы переводим его как «выравнивание», но оно больше похоже на «распределение», justify-content, от которого оно позаимствовало два значения space-between и space-around.

Близость с «распределением» подчёркивает и отсутствие значения baseline — всё-таки свойство работает с рядами, а не с отдельными элементами.

От «выравниваний» же, align-items и align-self, это свойство получило значение по умолчанию stretch и возможность «растягивать» ряды по высоте.

Порядковый номер флекс-элемента, order [19/31]

И ещё одно свойство, которое мы рассмотрим в этом курсе, — это order, порядковый номер флекс-элемента.

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

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

Порядковый номер задаётся целым числом, положительным или отрицательным. Например:

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

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Идеальное центрирование элементов

(для блоков divс которыми я работаю всегда должен быть контейнер, которому я задам флекс)

Самый насущный вопрос, который можно легко и изящно решить с помощью флексбокса, — как отцентровать элемент по вертикали и горизонтали так, чтобы центровка сохранялась при изменении размеров элемента или контейнера.

Ответ прост: задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto.

В этом случае флекс-элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали.

Стоит обратить внимание на интересный момент. Если центруемых флекс-элементов в контейнере будет несколько, то отступы между ними будут равномерными. То есть будет происходить распределение элементов внутри флекс-контейнера чем-то похожее на justify-content: space-around.

Флекс-элемент внутри флекс-контейнера можно также сделать флекс-контейнером.

Он будет одновременно вести себя и как флекс-элемент, то есть подчиняться правилам распределения и выравнивания своего родителя, и как самостоятельный флекс-контейнер. При этом его вложенные элементы первого уровня будут следовать только его флекс-правилам.

Блоки одинаковой высоты [30/31]

Ещё одна часто встречающаяся задача — реализовать раскладку с блоками одинаковой высоты.

Надо учитывать, что содержимое блоков может быть разным и их высота может меняться.

В обычной блочной модели есть фундаментальный недостаток — соседние блоки ничего не знают друг о друге, поэтому их высоты нельзя «связать». Получается, что все «стандартные» варианты для решения этой задачи не работают:

· float или inline-block не могут «связывать» высоты соседних блоков;

· таблицы и CSS-таблицы позволяют делать ячейки одинаковой высоты, но появляются ограничения, связанные с расположением элементов в строках;

· минимальная высота не подходит, так как какой-то из блоков всегда может стать выше остальных;

· конечно, можно задать всем блокам фиксированную высоту, но это решение совсем не универсальное.