Подробное руководство по свойству CSS3 Flexbox

Flexbox Layout официально называется CSS Flexible Box Layout Module - это новый модуль для макетов в CSS3, направленный на улучшение работы с элементами, их выравнивание, изменения направление и порядка их в контейнере, даже когда они динамические или неизвестного размера. Важнейшей особенностью flex-контейнера является возможность изменять ширину или высоту ее потомков, чтобы заполнять свободное пространство при различных размерах экрана.

Flexbox прост в использовании, так как расположением элементов легко управлять и сложные макеты могут быть реализованы с меньшим количеством кода, чем ранее, что приводит к упрощению процесса разработки.

Вместо того, чтобы объяснять как свойства Flex работают, эта статья будет сосредоточена на том, как они визуально оказывают влияние на макет.

Основы

Прежде чем мы начнем с описания flexbox-свойств давайте немного познакомимся с моделью flexbox. Flex-макет состоит из родительского контейнера, указанного как flex-container, и его блоков-потомков, которые называются flex-items (см. ниже).

CSS3-Flexbox-модель

На изображении выше вы можете видеть свойства и терминологию, используемую для описания 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-элемента:

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

Если вы хотите отображать его как inline элемент, используйте свойство inline-flex:

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

Примечание: Это свойство нужно установить только для родительского контейнера и все его прямые потомки автоматически станут flex-элементами.

Ниже описаны все свойства flexbox и как они влияют на макет визуально.

Flexbox-свойства контейнеров

Flex-direction

Это свойство определяет, как flex-элементы размещаются в flex-контейнере, устанавливает направление главной оси flex-контейнеров. Они могут быть установлены в двух основных направлениях, как строки по горизонтали или как колонки по вертикали.

Значения:

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:row;
}

Flex-элементы размещаются в строке слева направо в ltr-контексте (направление текста слева-направо).

flexbox flex direction row

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction: row-reverse;
}

Flex-элементы размещаются в строке справа налево в ltr-контексте.

flexbox flex direction row reverse

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}

Flex-элементы размещаются в колонке сверху вниз.

flexbox flex direction column

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

Flex-элементы размещаются в колонке снизу вверх.

flexbox flex direction column reverse

Значение по умолчанию: row

Примечание: row и row-reverse зависят от режима вывода текста, так в контексте rtl они будут работать в обратном порядке.

Flex-wrap

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

Значения:

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

Flex-элементы располагаются в одну строку, по-умолчанию они сжимаются, чтобы занять всю ширину flex-контейнера.

flexbox flex wrap nowrap

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:wrap;
}

Flex-элементы располагаются в несколько строк, если это необходимо, слева-направо и свехру-вниз.

flexbox flex-wrap wrap

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap: wrap-reverse;
}

Flex-элементы располагаются в несколько строк, если это необходимо, слева-направо и снизу-вверх.

flexbox flex-wrap wrap-reverse

Значение по-умолчанию: nowrap

Замечание: Эти свойства зависят от режима вывода текста, так в контексте rtl они будут работать в обратном порядке.

flex-flow

Это свойство просто сокращение свойств flex-direction и flex-wrap.

Значения:

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow: <flex-direction> || <flex-wrap>;
}

Значение по-умолчанию: row nowrap

justify-content

Свойство justify-content выравнивает flex-элементы вдоль основной оси текущей линии flex-контейнера. Это свойство помогает распределять оставшееся свободное пространство.

Значения:

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

Flex-элементы выравниваются по левой стороне flex-контейнера при ltr-контексте.

flexbox justify-content flex-start

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

Flex-элементы выравниваются по правой стороне flex-контейнера при ltr-контексте.

flexbox justify-content flex-end

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

Flex-элементы выравниваются по центру flex-контейнера.

flexbox justify-content center

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

Flex-элементы располагаются с равными промежутками между ними, первый и последний элемент прижимаются к краям flex-контейнера.

flexbox justify-content space-between

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

Flex-элементы располагаются с равными промежутками вокруг каждого flex-элемента, в том числе первый и последний элементы.

flexbox justify-content space-around

Значение по-умолчанию: flex-start

align-items

Flex-элементы могут быть выравнены по поперечной оси текущей линии flex-контейнера, похоже на justify-content, но в перпендикулярном направлении. Это свойство устанавливает выравнивание для всех flex-элементов.

Values:

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

Flex-элементы заполняют всю высоту (или ширину) поперечной оси flex-контейнера.

flexbox align-items stretch

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

Flex-элементы располагаются в начале поперечной оси flex-контейнера.

flexbox-align-items-flex-start

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

Flex-элементы располагаются в конце поперечной оси flex-контейнера.

flexbox-align-items-flex-end

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

Flex-элементы располагаются в центре поперечной оси flex-контейнера.

flexbox-align-items-center

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

Flex-элементы выровнены таким образом, что их базовая линия находится на одном уровне.

flexbox-align-items-baseline

Значение по-умолчанию: stretch

Замечание: Как высчитывается базовая линия можно прочитать здесь.

align-content

Свойство align-content выравнивает линии внутри flex-контейнера, когда там есть дополнительное свободное место по поперечной оси, похоже на то как justify-content выравнивает отдельные элементы по основной оси.

Значения:

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content: stretch;
}

Flex-элементы отображаются с распределением свободного пространства после каждой строки.

flexbox align-content stretch

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:  flex-start;
}

Flex-элементы располагаются в начале поперечной оси flex-контейнера.

flexbox align-content flex-start

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content: flex-end;
}

Flex-элементы располагаются в конце поперечной оси flex-контейнера.

flexbox align-content flex-end

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content: center;
}

Линии flex-элементов располагаются в центре поперечной оси flex-контейнера.

flexbox align-content center

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content: space-between;
}

Линии flex-элементов располагаются с равными промежутками между ними, первая и последняя линии прижимаются к краям flex-контейнера.

flexbox align-content space-between

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content: space-around;
}

Flex-элементы располагаются с равными промежутками между каждой линией flex-элементов.

flexbox align-content space-around

Значение по-умолчанию: stretch

Замечание: Это свойство работает только когда flex-контейнер содержит несколько линий flex-элементов. Если элементы расположены в одну линию, то это свойство не оказывает никакого эффекта на макет.

Замечание для flex-контейнеров:

Все свойства column-* не оказывают никакого эффекта на flex-контейнер.
Псевдо-элементы ::first-line и ::first-letter не применяются к flex-контейнерам.

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

order

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

Значения:

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order: <integer>;
}

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

flexbox order

Значение по-умолччанию: 0

flex-grow

Это свойство определяет фактор "жадности", это означает сколько flex-элемент будет забирать пространства по отношению к остальной части flex-элементов в контейнере, когда свободное пространство всё распределено.

Значения:

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow: <number>;
}

Если все flex-элементы имеют одинаковое значение flex-grow, тогда все элементы имеют одинаковый размер.

flexbox flex-grow 1

Второй flex-элемент занимает больше места относительно размера других flex-элементов.

flexbox flex-grow 2

Значение по-умолчанию: 0

Замечание: Отрицательные числа не работают.

flex-shrink

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

Значения:

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink: <number>;
}

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

flexbox flex-shrink

Значение по-умолчанию: 1

Замечание: отрицательные числа не работают.

flex-basis

Это свойство принимает те же значения, что и ширина и высота, и определяет начальный размер flex-элемента.

Значения:

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis: auto | <width>;
}

flex-basis определено для 4-го flex-элемента и устанавливает начальный размер для него.

flexbox flex-basis

Значение по-умолчанию: auto

flex

Это свойство сокращение для flex-grow, flex-shrink и flex-basis свойств.

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

Значение по-умолчанию: 0 1 auto

Замечание: W3C рекомендуется использовать сокращенный синтаксис flex, а не отдельные свойства, так как сокращение правильно сбрасывает любые неуказанные свойства.

align-self

Свойство align-self позволяет определять выравнивание для отдельных flex-элементов.

Значения:

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

Для 3-го и 4-го flex-элемента было переопределено выравнивание при помощи свойства align-self.

flexbox align-self

Значение по-умолчанию: auto

Замечание для flex-элементов:

Свойства float, clear и vertical-align не оказывают влияние на flex-элементы.

Flexbox playground

Это страничка, где вы можете поиграться с различными flex-свойствами и изучить мощь flexbox. Объединяйте по несколько flex-свойств, чтобы получить сложные макеты.

Источник на англ. языке.


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

    You have no rights to post comments