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
- Сперва из ширины экрана вычитается базовый размер элементов: 900 - 99 - 623 = 178
- Потом подсчитывается общее количество flex-grow значений в контейнере: 5
- Затем оставшееся от вычитания базовых размеров пространство делится на получившееся число: 178 / 5 = 35.6
- И уже после этого подсчитывается какое количество пространства займет каждый элемент:
- 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 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.