• Заметки
    •

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

    front-end