Flexbox сетка CSS

Контейнер
Элемент
Элемент
Элемент

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

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 — растягиваются на все свободное пространство.
Элемент
Элемент
align-self: flex-end
Элемент

Принцип деления 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.

?

Благодарю за ответ!

Была ли эта информация полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1