СSS Flexbox Layout (flexible box layout module) - это один из наиболее удобных, гибких и простых способов расположения элементов относительно друг друга на HTML-странице.
У flexbox есть две оси, по которым мы можем выравнивать элементы - main axis (главная ось) и cross axis (побочная ось). Обязательно нужно помнить о невозможности позиционирования одновременно по двум осям (для такого случая лучше подойдет CSS Grid Layout).
flex-direction - свойство, определяющее главную ось, может принимать одно из следующих значений:
- row
- row-reverse
- column
Дефолтное поведение по стандартному флоу HTML - блоки отобразятся сверху вниз, занимая всю ширину <body>. (Дефолтное значение свойства display: block;)
Когда мы применим свойство display: flex; к блоку с классом .container, каждый его дочерний элемент (элемент первого порядка, лежащий внутри . container), станет flex-item, и получит новое дефолтное поведение:
⠀
⠀- дети (айтемы) встанут друг за другом в одну строку (по дефолту flex-direction: row;)
⠀- по порядку айтемы будут находиться слева направо:
Айтемы не растянутся на всю ширину <body>, но, если места в блоке не хватит, то они сожмутся, чтобы уместиться. Также, айтемы растянутся по cross axis (в нашем примере это - height) и в случае, если у айтемов будет разная высота, то они растянутся по самому высокому элементу.
Flex Direction
Если мы захотим поставить наши айтемы в колонку, то просто зададим контейнеру свойство flex-direction: column;
Свойство flex-wrap: wrap; отвечает за перенос элементов (айтемов) на другую строку: как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Также можно поставить значение flex-wrap: nowrap; то есть в начальное значение, элементы ужмутся так, чтобы уместиться на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости.
Flex Flow
flex-direction и flex-wrap можно объединить в одно свойство: flex-flow: [direction] [wrap].
Выравнивание
В модели Flexbox есть несколько свойств, позволяющих выравнивать элементы:
- justify-content: выравнивает элементы контейнера по главной оси
- align-items: выравнивает элементы контейнера по вспомогательной оси
- align-self: выравнивает единичный элемент
- align-content: выравнивание по вспомогательной оси в случае, если было применено свойство flex-wrap: wrap;
justify-content
Дефолтное значение - flex-start, помимо которого можно использовать: flex-end, center, space-around, space-between, space-evenly (примеры расположения элементов - на картинке ниже).
align-items
Выравнивание по вспомогательной оси, значениями свойства могут быть те же, что и для justify-content, а вот результаты смотрите на кратинке.
align-content
Стоит добавить, что свойство align-content не оказывает влияние на однострочные flex-блоки.