Flexbox сетка CSS

Отредактировано: 04 Августа 2018

Параметры для родительских контейнеров

display

Задает контейнеру значение flex или inline-flex, после чего все ближайшие потомки блока начинают подчиняться правилам flex элементов. В зависимости от установленного параметра, контейнер при этом может считаться блочным или строчным элементом. Для дочерних элементов flexbox контейнера перестают работать такие css свойства как float, clear и vertical-align.

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

• flex — блочный flexbox контейнер.
• inline-flex — строчный flexbox контейнер.

flex-direction

Направление элементов во flex контейнере. Контейнер может иметь только одно направление единовременно. 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

По умолчанию: row

• row — в строку.
• row-reverse — в строку в обратном порядке.
• column — в столбец.
• column-reverse — в столбец в обратном порядке.

flex-wrap

Устанавливает возможность переноса элементов на новую строку/столбец. 

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

По умолчанию: nowrap

• nowrap — не переносятся.
• wrap — переносятся.
• wrap-reverse — переносятся в обратном порядке.

flex-flow

Сокращенная запись для flex-direction и flex-wrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

По умолчанию: row nowrap

justify-content

Определяет выравнивание дочерних элементов по горизонтали (при direction: column по вертикали). Устанавливает поведение пустого пространства, если дочерние элементы статичные, или достигли своего максимального размера.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

По умолчанию: flex-start

• flex-start — в начале строки.
  Элемент

  Элемент

  Элемент
• flex-end — в конце строки.
  Элемент

  Элемент

  Элемент
• center — по центру.
  Элемент

  Элемент

  Элемент
• space-between — с расстоянием между.
  Элемент

  Элемент

  Элемент
• space-around — с равным расстоянием вокруг (первый и последний элементы оказываются ближе к краям родительского контейнера, чем к элементам между ними).
  Элемент

  Элемент

  Элемент
• space-evenly — с равными расстояниями от краев и между элементами.
  Элемент

  Элемент

  Элемент

align-content

Определяет выравнивание дочерних элементов по вертикали (при direction: column по горизонтали). Устанавливает поведение пустого пространства, если дочерние элементы статичные, или достигли своего максимального размера.

Не действует если имеется только 1 строка элементов.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

По умолчанию: stretch

• flex-start — в начале строки.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• flex-end — в конце строки.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• center — по центру.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• space-between — с расстоянием между.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• space-around — с равным расстоянием вокруг (первый и последний элементы оказываются ближе к краям родительского контейнера, чем к элементам между ними).
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• stretch — растягиваются на все свободное пространство.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

align-items

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

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

По умолчанию: stretch

• flex-start — вверху строки.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• flex-end — внизу строки.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• center — по центру.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• baseline — по базовой линии.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент
• stretch — растягиваются на все свободное пространство.
  Элемент

  Элемент

  Элемент

  Элемент

  Элемент

 

Параметры для дочерних элементов

order

Устанавливает порядок отображения элемента.

.item { order:  <integer>; } 

По умолчанию: 0, в исходном порядке, определяемом положением контейнера в коде.

flex-grow

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

.item { flex-grow :  <number> ; } 

По умолчанию: 0

flex-shrink

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

.item { flex-shrink :  <number> ; } 

По умолчанию: 1

flex-basis

Определяет размер элемента по умолчанию, перед распределением оставшегося пространства. Можно указывать в любых доступных в вебе единицах (px, em, rem и т.д.)

.item { flex-basis :  <length> | auto ; } 

По умолчанию: auto, зависит от размера контента.

flex

Сокращение объединяющее параметры flex-grow, flex-shrink и flex-basis.

.item { flex :  none | [ <'flex-grow' > <'flex-shrink' >? || <'flex-basis' > ]  }

По умолчанию: 0 1 auto

align-self

Переопределяет значение align-items для определенного элемента.

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 

По умолчанию: stretch

• flex-start — вверху строки.
• flex-end — внизу строки.
• center — по центру.
• baseline — по базовой линии.
• stretch — растягиваются на все свободное пространство.

Принцип деления flex пространства

Допустим есть flex контейнер со следующими параметрами:

родительский контейнер: ширина 900px
элемент section: ширина 99px, flex-grow: 3
элемент aside: ширина 623px, flex-grow: 2

1. Сперва из ширины экрана вычитается базовый размер элементов: 900 - 99 - 623 = 178
2. Потом подсчитывается общее количество flex-grow значений в контейнере: 5
3. Затем оставшееся от вычитания базовых размеров пространство делится на получившееся число: 178 / 5 = 35.6
4. И уже после этого подсчитывается какое количество пространства займет каждый элемент: 
   • section: 99 + ( 3 * 35.6 ) = 205.8px
   • aside: 623 + ( 2 * 35.6 ) = 694.2px

Примеры

Для flexbox элементов свойство position: sticky работает не так как хотелось бы, поэтому, фиксированные элементы делаются немного иначе.

Фиксированные шапка и подвал 

See the Pen flexbox / fixed header by riwkus (@riwkus) on CodePen.

Фиксированная шапка и ограниченный по ширине подвал

See the Pen flexbox / fixed header by riwkus (@riwkus) on CodePen.

Flexbox и элемент с position: sticky

Работает не во всех браузерах

See the Pen QrvOYq by riwkus (@riwkus) on CodePen.

Flexbox и элементы в нижней части экрана

See the Pen Flexbox. Items in bottom by riwkus (@riwkus) on CodePen.

Flexbox. Текстовый masonry

See the Pen Flexbox. Masonry, text by riwkus (@riwkus) on CodePen.