CSS flex

🎓 Flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов.

Flexbox состоит из flex-контейнера — родительского контейнера и flex-элементов — дочерних блоков.

---

Свойство display

• flex - отображает контейнер как блочный элемент;

.flex-container {
    display: flex;
}

• inline-flex - отображает контейнер как строчный элемент;

.flex-container {
    display: inline-flex;
}

После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера.

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

---

Выравнивание элементов по горизонтали

justify-content

Свойство выравнивает flex-элементы по ширине flex-контейнера, распределяя оставшееся свободное пространство, незанятое flex-элементами.

property	comment
flex-start	Значение по умолчанию. Flex-элементы позиционируются от начала flex-контейнера.
flex-end	Flex-элементы позиционируются относительно правой границы flex-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.
space-between	Flex-элементы выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале flex-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами.
space-around	Flex-элементы выравниваются по главной оси, а свободное место делится поровну, добавляя отступы справа и слева.

 

.flex-container {
    display: flex;
    justify-content: space-between;
}

---

Выравнивание элементов по вертикали

align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по перпендикулярной оси (по высоте).

property	comment
stretch	Значение по умолчанию. Flex-элементы растягиваются, занимая все пространство по высоте.
flex-start	Flex-элементы выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера.
flex-end	Flex-элементы выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.

 

.flex-container {
    display: flex;
    align-items: flex-start;
}

---

Направление главной оси

flex-direction

Свойство определяет, каким образом flex-элементы укладываются во flex-контейнере, задавая направление главной оси flex-контейнера. Они могут располагаться в двух главных направлениях — горизонтально, как строки или вертикально, как колонки. Главная ось по умолчанию идет слева направо. Поперечная – сверху вниз.

property	comment
row	Значение по умолчанию, слева направо. Flex-элементы выкладываются в строку.
row-reverse	Направление справа налево. Flex-элементы выкладываются в строку относительно правого края контейнера.
column	Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse	Колонка с элементами в обратном порядке, снизу вверх.

 

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

---

Многострочность элементов

flex-wrap

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

property	comment
nowrap	Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо
wra	Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов
wrap-reverse	Flex-элементы переносятся, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

---

3.6 Порядок отображения элементов

order

Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера. По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер. Самый первый flex-элемент по умолчанию расположен слева. Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1; в конец строки — order: 1.

.flex-container {
    display: flex;
}

.flex-item {
    order: 1;
}

---

шпаргалка по flexbox