Post Image

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

Основы flexbox

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

flexbox
Основы flexbox

На схеме выше представлены свойства и терминология, которая используется для описания flex-контейнера и его дочерних элементов. Для получения более подробной информации об их значении читайте в официальной спецификации модели flexbox на W3C.

Браузеры с поддержкой последней спецификации flexbox:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (с префиксом -webkit-)
  • Android 4.4+
  • iOS 7.1+ (с префиксом -webkit-)

Более детальную поддержку и совместимость с браузерами можно посмотреть здесь.

Включение модуля flex

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

.flex-wrapper {

 display: -webkit-flex; /* Safari */

 display: flex }

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

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

Свойства flexbox для контейнера

flex-direction

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

.flex-wrapper {

 -webkit-flex-direction: row; /* Safari */

 flex-direction: row }

С направлением row flex-элементы укладываются в ряд слева направо

flex-direction: row

.flex-wrapper {

-webkit-flex-direction: row-reverse; /* Safari */

flex-direction: row-reverse }

С направлением row-reverse flex-элементы укладываются в ряд справа налево.

flex-direction: row-reverse

.flex-wrapper {

-webkit-flex-direction: column; /* Safari */

flex-direction: column }

С направлением column flex-элементы укладываются в колонку сверху вниз.

flex-direction: column

.flex-wrapper {

-webkit-flex-direction: column-reverse; /* Safari */

flex-direction: column-reverse }

С направлением column-reverse flex-элементы укладываются в колонку снизу вверх.

flex-direction: column-reverse

flex-wrap

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

.flex-wrapper {

-webkit-flex-wrap: nowrap; /* Safari */

flex-wrap: nowrap }

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

flex-wrap: nowrap

.flex-wrapper {

-webkit-flex-wrap: wrap; /* Safari */

flex-wrap: wrap }

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

flex-wrap: wrap

.flex-wrapper {

-webkit-flex-wrap: wrap-reverse; /* Safari */

flex-wrap: wrap-reverse }

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

flex-wrap: wrap-reverse

flex-flow

Это свойство – сокращённая запись для свойств flex-direction и flex-wrap.

.flex-wrapper {

flex-flow: row wrap /* flex-direction и flex-wrap */ }

justify-content

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

.flex-wrapper {

-webkit-justify-content: flex-start; /* Safari */

justify-content: flex-start }

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

justify-content: flex-start

.flex-wrapper {

-webkit-justify-content: flex-end; /* Safari */

justify-content: flex-end }

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

justify-content: flex-end

.flex-wrapper {

-webkit-justify-content: center; /* Safari */

justify-content: center }

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

justify-content: center

.flex-wrapper {

-webkit-justify-content: space-between; /* Safari */

justify-content: space-between }

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

justify-content: space-between

.flex-wrapper {

-webkit-justify-content: space-around; /* Safari */

justify-content: space-around }

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

justify-content: space-around

align-items

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

.flex-wrapper {

-webkit-align-items: streatch; /* Safari */

align-items: streatch }

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

align-items: streatch

.flex-wrapper {

-webkit-align-items: flex-start; /* Safari */

align-items: flex-start }

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

align-items: flex-start

.flex-wrapper {

-webkit-align-items: flex-end; /* Safari */

align-items: flex-end }

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

align-items: flex-end

.flex-wrapper {

-webkit-align-items: center; /* Safari */

align-items: center }

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

align-items: center

.flex-wrapper {

-webkit-align-items: baseline; /* Safari */

align-items: baseline }

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

align-items: baseline

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

align-content

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

.flex-wrapper {

-webkit-align-content: stretch; /* Safari */

align-content: stretch }

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

align-content: stretch

прим. перев.: такая картина, как на рисунке, будет только при значении align-items: flex-start. Корректнее было бы сказать, что align-content: stretch поровну делит общую высоту контейнера между всеми строками флекс-элементов, а внутри каждой строки они выравниватся с помощью align-items, так же как и в случае одной строки.

.flex-wrapper {

-webkit-align-content: flex-start; /* Safari */

align-content: flex-start }

Ряды flex-элементы прижаты к поперечному началу flex-контейнера.

align-content: flex-start

.flex-wrapper {

-webkit-align-content: flex-end; /* Safari */

align-content: flex-end }

Ряды flex-элементы прижаты к поперечному концу flex-контейнера.

align-content: flex-end

.flex-wrapper {

-webkit-align-content: center; /* Safari */

align-content: center }

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

align-content: center

.flex-wrapper {

-webkit-align-content: space-between; /* Safari */

align-content: space-between }

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

align-content: space-between

.flex-wrapper {

-webkit-align-content: space-around; /* Safari */

align-content: space-around }

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

align-content: space-around

Ниже представлены все свойства flexbox для контейнера:

flexbox для контейнера
flexbox для контейнера

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

order

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

.flex-item {

-webkit-order: [целое число]; /* Safari */

order: [целое число] }

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

order

flex-grow

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

.flex-item {

-webkit-flex-grow: [число]; /* Safari */

flex-grow: [число] }

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

flex-grow

flex-shrink

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

.flex-item {

-webkit-flex-shrink: [число]; /* Safari */

flex-shrink: [число] }

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

flex-shrink

flex-basis

Свойство flex-basis задает базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через box-sizing.

.flex-item {

-webkit-flex-basis: 195px; /* Safari */

flex-basis: 195px }

Мы указываем размер выбранного блока в 195px, для всех остальных элементов flex-basis принимает значение auto.

flex-basis

align-self

Свойство align-self переопределяет выравнивание по умолчанию (или то, что указано в align-items) для отдельных 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 }

align-self

Ниже представлены все свойства flexbox для контейнера:

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

Заключение

В этой статье мы подробно и наглядно рассмотрели все возможности flexbox, разобрали свойства для родительского контейнера и его дочерних элементов. Спасибо за внимание!

Автор статьи: Denis Motive

Источники: MDN, W3S, Scotch, W3C.

Следующая статья
Введение в CSS-shapes