Flexbox Layout официально называется CSS Flexible Box Layout Module - это новый модуль для макетов в CSS3, направленный на улучшение работы с элементами, их выравнивание, изменения направление и порядка их в контейнере, даже когда они динамические или неизвестного размера. Важнейшей особенностью flex-контейнера является возможность изменять ширину или высоту ее потомков, чтобы заполнять свободное пространство при различных размерах экрана.
Flexbox прост в использовании, так как расположением элементов легко управлять и сложные макеты могут быть реализованы с меньшим количеством кода, чем ранее, что приводит к упрощению процесса разработки.
Вместо того, чтобы объяснять как свойства Flex работают, эта статья будет сосредоточена на том, как они визуально оказывают влияние на макет.
Основы
Прежде чем мы начнем с описания flexbox-свойств давайте немного познакомимся с моделью flexbox. Flex-макет состоит из родительского контейнера, указанного как flex-container, и его блоков-потомков, которые называются flex-items (см. ниже).
На изображении выше вы можете видеть свойства и терминологию, используемую для описания flex-контейнера и его потомков. Для получения дополнительной информации вы можете прочитать спецификацию model flexbox от W3C.
Поддержка flexbox прошла через несколько изменений синтаксиса от его первоначального проекта в 2009 году, поэтому, чтобы избежать путаницы мы будем использовать только синтаксис с последнего рабочего проекта (Сентябрь 2014). Если вам нужно сохранить поддержку старых браузеров вы можете прочитать эту статью о том, как сделать это наилучшим образом.
Поддержка браузерами последней спецификации flexbox:
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+ (с префиксом -webkit-)
- Android 4.4+
- IOS 7.1+ (с префиксом -webkit-)
Вы можете просмотреть подробную информацию о поддержке браузерами и совместимости здесь.
Использование
Чтобы использовать макет flexbox нужно просто установить свойство display для родительского HTML-элемента:
{geshi lang="css"}
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}{/geshi}
Если вы хотите отображать его как inline элемент, используйте свойство inline-flex:
{geshi lang="css"}
.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}{/geshi}
Примечание: Это свойство нужно установить только для родительского контейнера и все его прямые потомки автоматически станут flex-элементами.
Ниже описаны все свойства flexbox и как они влияют на макет визуально.
Flexbox-свойства контейнеров
Flex-direction
Это свойство определяет, как flex-элементы размещаются в flex-контейнере, устанавливает направление главной оси flex-контейнеров. Они могут быть установлены в двух основных направлениях, как строки по горизонтали или как колонки по вертикали.
Значения:
{geshi lang="css"}
.flex-container {
-webkit-flex-direction: row; /* Safari */
flex-direction:row;
}{/geshi}
Flex-элементы размещаются в строке слева направо в ltr-контексте (направление текста слева-направо).
{geshi lang="css"}
.flex-container {
-webkit-flex-direction: row-reverse; /* Safari */
flex-direction: row-reverse;
}{/geshi}
Flex-элементы размещаются в строке справа налево в ltr-контексте.
{geshi lang="css"}
.flex-container {
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
}{/geshi}
Flex-элементы размещаются в колонке сверху вниз.
{geshi lang="css"}
.flex-container {
-webkit-flex-direction: column-reverse; /* Safari */
flex-direction: column-reverse;
}{/geshi}
Flex-элементы размещаются в колонке снизу вверх.
Значение по умолчанию: row
Примечание: row и row-reverse зависят от режима вывода текста, так в контексте rtl они будут работать в обратном порядке.
Flex-wrap
По первоначальной концепции flexbox - это контейнер, в котором все его элементы расположены в одной строке. Свойство flex-wrap позволяет располагать flex-элементы в виде одной или нескольких строк, и управлять направлением этих строк.
Значения:
{geshi lang="css"}
.flex-container {
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap: nowrap;
}{/geshi}
Flex-элементы располагаются в одну строку, по-умолчанию они сжимаются, чтобы занять всю ширину flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:wrap;
}{/geshi}
Flex-элементы располагаются в несколько строк, если это необходимо, слева-направо и свехру-вниз.
{geshi lang="css"}
.flex-container {
-webkit-flex-wrap: wrap-reverse; /* Safari */
flex-wrap: wrap-reverse;
}{/geshi}
Flex-элементы располагаются в несколько строк, если это необходимо, слева-направо и снизу-вверх.
Значение по-умолчанию: nowrap
Замечание: Эти свойства зависят от режима вывода текста, так в контексте rtl они будут работать в обратном порядке.
flex-flow
Это свойство просто сокращение свойств flex-direction и flex-wrap.
Значения:
{geshi lang="css"}
.flex-container {
-webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
flex-flow: <flex-direction> || <flex-wrap>;
}{/geshi}
Значение по-умолчанию: row nowrap
justify-content
Свойство justify-content выравнивает flex-элементы вдоль основной оси текущей линии flex-контейнера. Это свойство помогает распределять оставшееся свободное пространство.
Значения:
{geshi lang="css"}
.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
}{/geshi}
Flex-элементы выравниваются по левой стороне flex-контейнера при ltr-контексте.
{geshi lang="css"}
.flex-container {
-webkit-justify-content: flex-end; /* Safari */
justify-content: flex-end;
}{/geshi}
Flex-элементы выравниваются по правой стороне flex-контейнера при ltr-контексте.
{geshi lang="css"}
.flex-container {
-webkit-justify-content: center; /* Safari */
justify-content: center;
}{/geshi}
Flex-элементы выравниваются по центру flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}{/geshi}
Flex-элементы располагаются с равными промежутками между ними, первый и последний элемент прижимаются к краям flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
}{/geshi}
Flex-элементы располагаются с равными промежутками вокруг каждого flex-элемента, в том числе первый и последний элементы.
Значение по-умолчанию: flex-start
align-items
Flex-элементы могут быть выравнены по поперечной оси текущей линии flex-контейнера, похоже на justify-content, но в перпендикулярном направлении. Это свойство устанавливает выравнивание для всех flex-элементов.
Values:
{geshi lang="css"}
.flex-container {
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
}{/geshi}
Flex-элементы заполняют всю высоту (или ширину) поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start;
}{/geshi}
Flex-элементы располагаются в начале поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-items: flex-end; /* Safari */
align-items: flex-end;
}{/geshi}
Flex-элементы располагаются в конце поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-items: center; /* Safari */
align-items: center;
}{/geshi}
Flex-элементы располагаются в центре поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-items: baseline; /* Safari */
align-items: baseline;
}{/geshi}
Flex-элементы выровнены таким образом, что их базовая линия находится на одном уровне.
Значение по-умолчанию: stretch
Замечание: Как высчитывается базовая линия можно прочитать здесь.
align-content
Свойство align-content выравнивает линии внутри flex-контейнера, когда там есть дополнительное свободное место по поперечной оси, похоже на то как justify-content выравнивает отдельные элементы по основной оси.
Значения:
{geshi lang="css"}
.flex-container {
-webkit-align-content: stretch; /* Safari */
align-content: stretch;
}{/geshi}
Flex-элементы отображаются с распределением свободного пространства после каждой строки.
{geshi lang="css"}
.flex-container {
-webkit-align-content: flex-start; /* Safari */
align-content: flex-start;
}{/geshi}
Flex-элементы располагаются в начале поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-content: flex-end; /* Safari */
align-content: flex-end;
}{/geshi}
Flex-элементы располагаются в конце поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-content: center; /* Safari */
align-content: center;
}{/geshi}
Линии flex-элементов располагаются в центре поперечной оси flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-content: space-between; /* Safari */
align-content: space-between;
}{/geshi}
Линии flex-элементов располагаются с равными промежутками между ними, первая и последняя линии прижимаются к краям flex-контейнера.
{geshi lang="css"}
.flex-container {
-webkit-align-content: space-around; /* Safari */
align-content: space-around;
}{/geshi}
Flex-элементы располагаются с равными промежутками между каждой линией flex-элементов.
Значение по-умолчанию: stretch
Замечание: Это свойство работает только когда flex-контейнер содержит несколько линий flex-элементов. Если элементы расположены в одну линию, то это свойство не оказывает никакого эффекта на макет.
Замечание для flex-контейнеров:
Все свойства column-* не оказывают никакого эффекта на flex-контейнер.
Псевдо-элементы ::first-line и ::first-letter не применяются к flex-контейнерам.
Свойства flexbox-элементов
order
Свойство order управляет порядком по которому дочерние элементы flex-контейнера появляются внутри него. По-умолчанию они расположены так как изначально добавлены в flex-контейнер.
Значения:
{geshi lang="css"}
.flex-item {
-webkit-order: <integer>; /* Safari */
order: <integer>;
}{/geshi}
Flex-элементы могут быть переупорядочены этим простым свойством, без изменения HTML-кода.
Значение по-умолччанию: 0
flex-grow
Это свойство определяет фактор "жадности", это означает сколько flex-элемент будет забирать пространства по отношению к остальной части flex-элементов в контейнере, когда свободное пространство всё распределено.
Значения:
{geshi lang="css"}
.flex-item {
-webkit-flex-grow: <number>; /* Safari */
flex-grow: <number>;
}{/geshi}
Если все flex-элементы имеют одинаковое значение flex-grow, тогда все элементы имеют одинаковый размер.
Второй flex-элемент занимает больше места относительно размера других flex-элементов.
Значение по-умолчанию: 0
Замечание: Отрицательные числа не работают.
flex-shrink
Свойство flex-shrink определяет фактор сжатия, это означает насколько flex-элемент будет сокращаться по отношению к остальной части flex-элементов.
Значения:
{geshi lang="css"}
.flex-item {
-webkit-flex-shrink: <number>; /* Safari */
flex-shrink: <number>;
}{/geshi}
По-умолчанию все flex-элементы могут быть сжаты, но если вы установите это свойство равным 0 (не сжимать) элемент будет сохранять первоначальный размер.
Значение по-умолчанию: 1
Замечание: отрицательные числа не работают.
flex-basis
Это свойство принимает те же значения, что и ширина и высота, и определяет начальный размер flex-элемента.
Значения:
{geshi lang="css"}
.flex-item {
-webkit-flex-basis: auto | <width>; /* Safari */
flex-basis: auto | <width>;
}{/geshi}
flex-basis определено для 4-го flex-элемента и устанавливает начальный размер для него.
Значение по-умолчанию: auto
flex
Это свойство сокращение для flex-grow, flex-shrink и flex-basis свойств.
{geshi lang="css"}
.flex-item {
-webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}{/geshi}
Значение по-умолчанию: 0 1 auto
Замечание: W3C рекомендуется использовать сокращенный синтаксис flex, а не отдельные свойства, так как сокращение правильно сбрасывает любые неуказанные свойства.
align-self
Свойство align-self позволяет определять выравнивание для отдельных flex-элементов.
Значения:
{geshi lang="css"}
.flex-item {
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}{/geshi}
Для 3-го и 4-го flex-элемента было переопределено выравнивание при помощи свойства align-self.
Значение по-умолчанию: auto
Замечание для flex-элементов:
Свойства float, clear и vertical-align не оказывают влияние на flex-элементы.
Flexbox playground
Это страничка, где вы можете поиграться с различными flex-свойствами и изучить мощь flexbox. Объединяйте по несколько flex-свойств, чтобы получить сложные макеты.