CSS3 flexbox — модуль макета гибкого контейнера

введение
CSS flexbox(FlexibleBoxLayoutModule) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов.
Flexbox состоит из flex-контейнера — родительского контейнера и flex-элементов — дочерних блоков. Дочерние элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:
Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх;
Переопределять порядок отображения элементов;
Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство;
Решать проблему с горизонтальным и вертикальным центрированием;
Переносить элементы внутри контейнера, не допуская их переполнения;
Создавать колонки одинаковой высоты;
Создавать прижатый к низу страницы подвал сайта.

введение
В основе flexbox лежит идея оси.
Flexbox является инструментом двумерной компоновки и использует для работы две оси — горизонтальную (главную ось) и поперечную.

В основе flexbox лежит идея оси.

Свойства flex-контейнера
Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого.
Flex-контейнер не является блочным контейнером, поэтому для внутренних блоков не работают такие CSS-свойства, как float, clear, vertical-align.
Также, на flex-контейнер не оказывают влияние свойства column-, создающие колонки в тексте и псевдоэлементы::first-line и ::first-letter.

1.1. Свойство display
Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки.
Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:
.flex-container {
display: -webkit-flex;
display: flex; /*отображает контейнер как блочный элемент*/
}
.flex-container {
display: -webkit-inline-flex;
display: inline-flex; /*отображает контейнер как строчный элемент*/

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

1.1. Свойство display
Рис. 1. Выравнивание элементов в модели flexbox

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами.
Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.
1.1. Свойство display

1.2. Выравнивание элементов по горизонтали justify-content
Свойство выравнивает flex-элементы по ширине flex-контейнера, распределяя оставшееся свободное пространство, незанятое flex-элементами.
Для выравнивания элементов по вертикали используется свойство align-content.
Свойство не наследуется.

1.2. Выравнивание элементов по горизонтали justify-content

1.2. Выравнивание элементов по горизонтали justify-content
Рис. 2. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис
.flex-container {
display: -webkit-flex;
-webkit-justify-content: flex-start;
display: flex;
justify-content: flex-start;
1.2. Выравнивание элементов по горизонтали justify-content

1.3. Выравнивание элементов по вертикали align-items
Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по перпендикулярной оси (по высоте).
Не наследуется.

1.3. Выравнивание элементов по вертикали align-items

1.3. Выравнивание элементов по вертикали align-items
Рис. 3. Выравнивание элементов в контейнере по вертикали

Синтаксис
.flex-container {
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
1.3. Выравнивание элементов по вертикали align-items

1.4. Направление главной оси flex-direction
Свойство определяет, каким образом flex-элементы укладываются во flex-контейнере, задавая направление главной оси flex-контейнера.
Они могут располагаться в двух главных направлениях — горизонтально, как строки или вертикально, как колонки.
Главная ось по умолчанию идет слева направо.
Поперечная – сверху вниз.
Свойство не наследуется.

1.4. Направление главной оси flex-direction

1.4. Направление главной оси flex-direction
Рис. 4. Свойство flex-direction для блочных и строчных элементов

Синтаксис
.flex-container {
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}
1.4. Направление главной оси flex-direction

1.5. Многострочность элементов flex-wrap
Свойство управляет тем, как flex-контейнер будет выкладывать flex-элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки.
По умолчанию flex-элементы укладываются в одну строку.
При переполнении контейнера их содержимое будет выходить за границы flex-элементов.
Не наследуется.

1.5. Многострочность элементов flex-wrap

1.5. Многострочность элементов flex-wrap
Рис. 5. Управление многострочностью с помощью свойства flex-wrap

Синтаксис
.flex-container {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
1.5. Многострочность элементов flex-wrap

1.6. Краткая запись направления и многострочности flex-flow
Свойство предоставляет возможность в одном свойстве задать направление главной оси и многострочность поперечной оси, т.е. сокращённая запись свойств flex-direction и flex-wrap.
Значение по умолчанию flex-flow: rownowrap;
Не наследуется.

1.6. Краткая запись направления и многострочности flex-flow

Синтаксис
.flex-container {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
1.6. Краткая запись направления и многострочности flex-flow

1.7. Многострочное выравнивание align-content
Свойство выравнивает строки flex-элементов по вертикали во flex-контейнере, позволяя управлять свободным пространством.
Свойство работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reversewrap/wrap-reverse; и высота flex-контейнера.
Не наследуется.

1.7. Многострочное выравнивание align-content

1.7. Многострочное выравнивание align-content
Рис. 6. Многострочное выравнивание flex-элементов

Синтаксис
.flex-container {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: flex-end;
display: flex;
flex-flow: row wrap;
align-content: flex-end;
height: 100px;
1.7. Многострочное выравнивание align-content

Свойства flex-элементов

2.1. Порядок отображения элементов order
Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера.
По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер.
Самый первый flex-элемент по умолчанию расположен слева.
Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1;, в конец строки — order: 1;.
Свойство не наследуется.

2.1. Порядок отображения элементов order
Рис. 7. Порядок отображения flex-элементов

Синтаксис
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-order: 1;
order: 1;
}
2.1. Порядок отображения элементов order

2.2. Базовая ширина элемента flex-basis
Свойство позволяет задать базовую ширину flex-элемента, относительно которой будет происходить растяжение flex-grow или сужение flex-shrink элемента.
Не наследуется

2.2. Базовая ширина элемента flex-basis

Синтаксис
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-basis: 100px;
flex-basis: 100px;
}
2.2. Базовая ширина элемента flex-basis

2.3. Растяжение элементов flex-grow
Свойство определяет коэффициент увеличения ширины flex-элемента относительно других flex-элементов. Свойство не наследуется.

2.3. Растяжение элементов flex-grow

2.3. Растяжение элементов flex-grow
Рис. 9. Растяжение flex-элементов в строке

Синтаксис
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-grow: 3;
flex-grow: 3;
}
2.3. Растяжение элементов flex-grow

2.4. Сужение элементов flex-shrink
Свойство указывает коэффициент уменьшения ширины flex-элемента относительно других flex-элементов. Работает только если для элемента задана ширина с помощью свойства flex-basis или width.
Свойство не наследуется.

2.4. Сужение элементов flex-shrink

2.4. Сужение элементов flex-shrink
Рис. 10. Сужение flex-элементов в строке

Синтаксис
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-shrink: 3;
flex-shrink: 3;
}
2.4. Сужение элементов flex-shrink

2.5. Задание базовой ширины и трансформации элемента одним свойством flex
Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;.
Можно указывать как одно, так и все три значения свойств.
Свойство не наследуется.
W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

2.5. Задание базовой ширины и трансформации элемента одним свойством flex

Синтаксис
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex: 3 1 100px;
-ms-flex: 3 1 100px;
flex: 3 1 100px;
}
2.5. Задание базовой ширины и трансформации элемента одним свойством flex

2.6. Выравнивание отдельных элементов align-self
Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера.
Переопределяет выравнивание, заданное align-items.
Не наследуется.

2.6. Выравнивание отдельных элементов align-self

2.6. Выравнивание отдельных элементов align-self
Рис. 11. Выравнивание отдельных flex-элементов