Вёрстка веб-страниц — ключевое применение CSS.

Традиционное решение для вёрстки основано наблочной модели, полагаясь наdisplayсвойство +positionсвойство +floatсвойства. Это очень неудобно для специальных макетов, таких как,вертикальное центрирование, которое нелегко реализовать.

В 2009 году W3C предложил новое решение — Flex-верстка — которое позволяет просто, полно и адаптивно реализовывать различные макеты страниц. В настоящее время оно поддерживается всеми браузерами, а значит, теперь вы можете безопасно использовать эту возможность.

Flex-верстка станет предпочтительным решением для верстки в будущем. В этой статье представлен синтаксис Flex-верстки.

Следующий материал в основном основан на этих двух статьях:Полное руководство по FlexboxиВизуальное руководство по свойствам CSS3 Flexbox。

1. Что такое Flex-верстка?

Flex — это сокращение от Flexible Box, означающее «гибкая верстка», используется для обеспечения максимальной гибкости блочной модели.

Любой контейнер можно задать как Flex-верстку.

.box{
  display: flex;
}

Строчные элементы также могут использовать Flex-верстку.

.box{
  display: inline-flex;
}

Браузеры с ядром Webkit должны добавлять префикс -webkit.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Обратите внимание, что после установки Flex-верстки свойства float, clear и vertical-align дочерних элементов станут недействительными.

2. Основные понятия

Элементы, использующие Flex-разметку, называются Flex-контейнерами (flex container), сокращенно "container". Все их дочерние элементы автоматически становятся членами контейнера, называемыми Flex-элементами (flex item), сокращенно "item".

По умолчанию контейнер имеет две оси: горизонтальную главную ось (main axis) и вертикальную поперечную ось (cross axis). Начальное положение главной оси (пересечение с границей) называется main start, а конечное положение — main end; начальное положение поперечной оси называется cross start, а конечное положение — cross end.

По умолчанию элементы располагаются вдоль главной оси. Пространство главной оси, занимаемое одним элементом, называется main size, а пространство поперечной оси, которое он занимает, называется cross size.

3. Свойства контейнера

Следующие 6 свойств задаются для контейнера.

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 Свойство flex-direction

Свойство flex-direction определяет направление главной оси (то есть направление, в котором располагаются элементы).

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

Оно может иметь 4 значения.

• row (по умолчанию): главная ось горизонтальна, начинается слева.
• row-reverse: главная ось горизонтальна, начинается справа.
• column: главная ось вертикальна, начинается сверху.
• column-reverse: главная ось вертикальна, начинается снизу.

3.2 Свойство flex-wrap

По умолчанию элементы располагаются в одну строку (также называемую осью). Свойство flex-wrap определяет, как выполнять перенос, если на одной оси не помещаются все элементы.

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

Свойство может принимать три значения.

(1) nowrap (по умолчанию): без переноса.

(2) wrap: перенос, первая строка сверху.

(3) wrap-reverse: перенос, первая строка снизу.

3.3 flex-flow

Свойство flex-flow — это сокращённая запись для свойств flex-direction и flex-wrap со значением по умолчанию row nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 Свойство justify-content

Свойство justify-content определяет выравнивание элементов по главной оси.

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

Свойство может принимать 5 значений. Конкретное выравнивание зависит от направления оси. Далее предполагается, что главная ось направлена слева направо.

• flex-start (по умолчанию): выравнивание по левому краю
• flex-end: выравнивание по правому краю
• center: выравнивание по центру
• space-between: выравнивание по обоим краям с равными интервалами между элементами.
• space-around: интервалы с обеих сторон каждого элемента равны. Поэтому интервал между элементами в два раза больше интервала между элементами и границей.

3.5 свойство align-items

Свойство align-items определяет, как элементы выравниваются по поперечной оси.

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

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

• flex-start: выравнивание по началу поперечной оси.
• flex-end: выравнивание по концу поперечной оси.
• center: выравнивание по центру поперечной оси.
• baseline: выравнивание по базовой линии первой строки текста в элементе.
• stretch (по умолчанию): если у элемента не задана высота или она установлена в auto, он заполнит всю высоту контейнера.

3.6 Свойство align-content

Свойство align-content определяет выравнивание нескольких осей. Если у элементов только одна ось, это свойство не оказывает никакого эффекта.

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

Это свойство может принимать 6 значений.

• flex-start: выравнивание по началу поперечной оси.
• flex-end: выравнивание по концу поперечной оси.
• center: выравнивание по центру поперечной оси.
• space-between: выравнивание по обоим концам поперечной оси, интервалы между осями распределены равномерно.
• space-around: интервал с обеих сторон каждой оси одинаков. Поэтому интервал между осями в два раза больше интервала между осями и границей.
• stretch (по умолчанию): ось заполняет всю поперечную ось.

4. Свойства элементов

Следующие 6 свойств задаются для элементов.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 Свойство order

Свойство order определяет порядок, в котором располагаются элементы. Чем меньше значение, тем раньше элемент располагается. По умолчанию — 0.

.item {
  order: <integer>;
}

4.2 Свойство flex-grow

Свойство flex-grow определяет коэффициент, на который элемент может увеличиваться; значение по умолчанию — 0, что означает, что даже при наличии оставшегося пространства он не будет увеличиваться.

.item {
  flex-grow: <number>; /* default 0 */
}

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

4.3 Свойство flex-shrink

Свойство flex-shrink определяет коэффициент, на который элемент может сжиматься; значение по умолчанию — 1, что означает, что при недостатке пространства элемент будет сжиматься.

.item {
  flex-shrink: <number>; /* default 1 */
}

Если у всех элементов свойство flex-shrink равно 1, они будут пропорционально сжиматься при недостатке пространства. Если у одного элемента свойство flex-shrink равно 0, а у остальных — 1, первый не будет сжиматься при недостатке пространства.

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

4.4 Свойство flex-basis

Свойство flex-basis определяет пространство главной оси (главный размер), занимаемое элементом до распределения дополнительного пространства. Браузер вычисляет, есть ли дополнительное пространство на главной оси, на основе этого свойства. Значение по умолчанию — auto, что соответствует исходному размеру элемента.

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

Его можно задать значением, как у свойства width или height (например, 350px), и элемент будет занимать фиксированное пространство.

4.5 Свойство flex

Свойство flex — это сокращённая запись для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto. Последние два свойства необязательны.

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

У этого свойства есть два сокращённых значения: auto (1 1 auto) и none (0 0 auto).

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

4.6 Свойство align-self

Свойство align-self позволяет отдельному элементу иметь выравнивание, отличное от других элементов, и может переопределять свойство align-items. Значение по умолчанию — auto, что означает наследование свойства align-items родительского элемента; если родительского элемента нет, это эквивалентно stretch.

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

Это свойство может принимать 6 значений. За исключением auto, остальные точно такие же, как у свойства align-items.

Источник: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html