Flex CSS что это и как с ним работать (флексы css)

Современная верстка не обходится без Flexbox, потому как это дает больше возможностей и скорость работы. Flex позволяет легко управлять расположением, выравниванием и размером блоков в отличии от устаревших (но иногда применяемых) float и position. В данной статье мы подробно разберем: Flex CSS что это и как работает на примерах.

CSS display flex — что это

Как вам наверняка уже известно, стиль display задает определенному блоку свое свойство и поведение в верстке. Например, display: flex; делает из блока flex контейнер и все его дочерние элементы становятся флексами, которыми можно управлять по разному в зависимости от ваших задач.

.container {
  display: flex;
}

CSS flex-direction направление элементов

Свойство flex-direction задаёт направление, в котором располагаются элементы:

.container {
  display: flex;
  flex-direction: row; /* по умолчанию: слева направо */
}

Значения свойства flex-direction могут быть разными, приведем список:

• row — размещение дочерних флексов по горизонтали.
• row-reverse — размещение по горизонтали но справа на лево.
• column — размещение дочерних флексов по вертикали.
• column-reverse — размещение по вертикали но снизу вверх.

CSS flex-wrap перенос строк

Все дочерние элементы (флексы) по умолчанию сжимаются в одну строку. Для того чтоб разрешить их перенос используется flex-wrap:

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

Теперь все дочерние блоки будут переносится на новую строку если не помещаются в одну.

CSS flex-flow короткая запись

CSS свойство flex-flow объединяет два свойства flex-direction и flex-wrap которые были приведены выше:

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

Flex-flow является просто сокращенной формой записи.

CSS justify-content и align-items выравнивание

Свойства justify-content и align-items управляют элементами по основной и поперечной оси выравнивания.

.container {
  justify-content: flex-start; /* элементы прижаты к началу */
  align-items: center; /* выравнивание по центру по вертикали */
}

Значения для свойства justify-content:

• flex-start — блоки в начале (по умолчанию).
• center — блоки по центру.
• flex-end — блоки в конце.
• space-between — блоки равномерно с промежутками.
• space-around — блоки с равными отступами по краям.

Значения для свойства align-items:

• stretch — растягивает элементы по высоте контейнера (значение по умолчанию).
• flex-start — прижимает элементы к началу поперечной оси (обычно — к верхнему краю).
• center — выравнивает элементы по центру поперечной оси.
• flex-end — прижимает элементы к концу поперечной оси (обычно — к нижнему краю).
• baseline — выравнивает элементы по их базовой линии текста.

CSS display inline-flex

Если вы хотите, чтобы контейнер с flex вёл себя как строчный элемент, используйте:

.container {
  display: inline-flex;
}

Это полезно, если нужно несколько флекс-контейнеров в одной строке.

CSS flex-grow что это

Свойство CSS flex-grow задает возможность растягивания элемента (дочернего флекса), для того чтоб заполнить свободное пространство.

.item {
  flex-grow: 1;
}

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

.item1 { 
  flex-grow: 1; 
}
.item2 { 
  flex-grow: 2; 
}

В данном примере элемент .item2 будет в два раза шире чем элемент .item1

CSS flex: 1 1 0 что это значит

Свойство flex — это короткая запись для трёх параметров: flex-grow, flex-shrink, flex-basis.

.item {
  flex: 1 1 0;
}

Расшифровка этих трех элементов задающихся флексу:

• 1 — элемент может расти, занимая свободное место.
• 1 — может сжиматься при нехватке места.
• 0 — начальная ширина — 0 (элемент займёт место, пропорционально flex-grow).

Как работает Flexbox на примере

Приводим пример реального кода при построении верстки:

/* HTML */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* CSS */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;
  background: #0ff;
  margin: 10px;
  text-align: center;
  padding: 20px;
}

Дополняем конкретной таблицей свойств и описаний флексов:

Свойство	Описание	Пример значения
display	Активирует flex-контейнер	flex, inline-flex
flex-direction	Задаёт направление расположения элементов	row, column
flex-wrap	Разрешает перенос элементов на новую строку	wrap, nowrap
flex-flow	Сокращённая запись для flex-direction и flex-wrap	row wrap
justify-content	Выравнивание элементов по основной оси	flex-start, center, space-between
align-items	Выравнивание элементов по поперечной оси	flex-start, center, stretch
align-content	Управляет расстоянием между строками при переносе	space-between, stretch
order	Определяет порядок отображения элементов	1, 2, 3…
flex-grow	Позволяет элементу расширяться, занимая свободное пространство	1, 2
flex-shrink	Позволяет элементу сжиматься при нехватке места	1, 0
flex-basis	Определяет базовую ширину элемента до распределения пространства	auto, 200px
flex	Сокращённая запись для flex-grow, flex-shrink и flex-basis	1 1 0
align-self	Переопределяет align-items для отдельного элемента	center, flex-end