Flex-контейнер

Область документа, использующая flexbox, называется flex-контейнером. Чтобы создать flex-контейнер, мы задаем значение flex или inline-flex для свойства display контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex-элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

Элементы отображаются в ряд (свойство flex-direction по умолчанию имеет значение row).
Позиционирование элементов начинается от начала главной оси.
Элементы не растягиваются по основной оси, но могут сжиматься.
Элементы будут растягиваться, чтобы заполнить размер побочной оси.
Свойству flex-basis задано значение auto.
Свойству flex-wrap задано значение nowrap.

Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.

Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.

Активное изучение

Изменение flex-direction

Добавление свойства flex-direction в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка flex-direction: row-reverse сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.

Если изменить значение свойства flex-direction на column, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра column-reverse, начало и конец стобца поменяются местами.

В приведенном ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column и column-reverse, чтобы посмотреть как изменятся элементы контейнера.

Активное изучение

Многострочный flex-контейнер с flex-wrap

Несмотря на то, что flexbox — это однонаправленная модель, есть возможность завернуть flex-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый flex-контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.

Чтобы включить такое поведение, добавьте параметр flex-wrap со значением wrap. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр flex-wrap установлен в значение wrap, элементы переносятся. Если Вы установите значение nowrap, то есть в начальное значение, то элементы сожмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им сжиматься при необходимости. Если им запретить сжиматься, или если они не смогут сблизиться достаточно сильно, то при установленном значении nowrap будет происходить переполнение контейнера.

Активное изучение

Краткая запись направления и многострочности: flex-flow

Вы можете указать два свойства flex-direction и flex-wrap в одном flex-flow. Первое значение свойства определяет flex-direction, второе flex-wrap.

В приведенном ниже примере вы можете изменить первое значение на одно из доступных для flex-direction - row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.