Что такое display flex в css. Полное руководство по Flexbox. Изменение порядка следования flex-элементов
Свойство order управляет порядком, в котором дочерние элементы появляются внутри flex-контейнера. По умолчанию они располагаются в том порядке, как добавлены исходно во flex-контейнер.
Значения
.flex-item { order: <целое число>; }flex-элементы могут быть переупорядочены с помощью этого простого свойства без изменения кода HTML.
Значение по умолчанию : 0.
flex-grow
Это свойство задаёт коэффициент роста, который определяет, насколько flex-элемент будет увеличиваться относительно остальных flex-элементов во flex-контейнере, при распределении положительного свободного пространства.
Значения
.flex-item { flex-grow: <число>; }Если все flex-элементы имеют одинаковое значение flex-grow , то все элементы будут иметь и одинаковый размер в контейнере.
Второй flex-элемент занимает больше места относительно размера других flex-элементов.
Значение по умолчанию : 0.
flex-shrink
flex-shrink задаёт коэффициент сжатия, который определяет, насколько flex-элемент будет сжиматься относительно остальных flex-элементов во flex-контейнере, при распределении отрицательного свободного пространства.
Значения
.flex-item { flex-shrink: <число>; }По умолчанию все flex-элементы могут быть сжаты, но если мы установим значение flex-shrink нулевым (без сжатия), то элементы сохраняют исходный размер.
Значение по умолчанию : 1.
Отрицательные числа недопустимы.
flex-basis
Это свойство принимает те же значения, что и свойства width и height , и определяет начальный основной размер flex-элемента, до того, как свободное пространство распределяется в соответствии с коэффициентами.
Значения
.flex-item { flex-basis: auto | <ширина>; }flex-basis указан для четвёртого flex-элемента и диктует его начальный размер.
Значение по умолчанию : auto.
flex
Это свойство является сокращением для свойств flex-grow , flex-shrink и flex-basis . Крое других значений также можно установить auto (1 1 auto ) и none (0 0 auto ).
Значения
.flex-item { flex: none | auto | [Значение по умолчанию : 0 1 auto .
W3C рекомендует использовать сокращённое свойство flex , вместо отдельных свойств, поскольку flex правильно сбрасывает любые неуказанные компоненты для типового использования .
align-self
Свойство align-self позволяет переопределить выравнивание по умолчанию (или значение, указанное через align-items ) для отдельных flex-элементов. Для понимания доступных значений обратитесь к описанию align-items для flex-контейнера.
Значения
.flex-item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }Для третьего и четвёртого flex-элементов переопределено выравнивание через свойство align-self .
CSS3-flexbox — это специальная технология, которая была введена в последней версии каскадных стилей, позволяющая задавать гибкую сетку расположения блоков внутри некоторого контейнера-родителя.
Какие возможности дает данная сетка:
- возможность управлять колончатой структурой основного каркаса html-вёрстки;
- управлять ориентацией расположения html-тэгов подобно табличной верстке;
- управлять порядком расположения;
- и многие другие.
Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:
Навигация
Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:
ИЕ:
11.0, 10.0 -ms-
Firefox:
28.0, 18.0 -moz-
Хром:
29.0, 21.0 -webkit-
Сафари:
6.1 -webkit-
Опера:
12.1 -webkit-
Сафари (под Мак):
7.0 -webkit-
Опера-Мини:
8
Анройд-Браузер:
4.4, 4.1 -webkit-
Хром (под Андройд):
44
1.1. Свойство display: flex
CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:
- display: flex; — для блокового отображения;
- display: inline-flex; — для инлайнового отображения.
Следует отметить, что для некоторых версий браузеров необходимо прописывать это правило с помощью спецпрефиксов (см. пункт выше), а также то, что html-теги лежащие в родителе без обёртки считаются анонимными:
1.2. Выравниваем горизонтально justify-content
Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.
justify-content | |
---|---|
Значения: | |
flex-start | Выравнивает по левой кромке. Дефолтное значение |
flex-end | Выравнивает по правой кромке. |
center | Выравнивает по середине. |
space-between | По всей ширине родителя на равновеличинные отрезки. Стоит отметить, что первый элемент приживается к левому краю без пустот, но с учетом паддингов, а последний также, но к правому краю. Все остальные блочные элементы размещаются между первым и последним через одинаковые отрезки пустоты. |
space-around | По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина. |
initial | Задание дефолтного значения. |
inherit |
Формат записи
B-podlogka { height: 120px; background-color: #ddd; margin: 0px; padding: 10px; display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start; }
B-podlogka { justify-content: flex-end; }
B-podlogka { justify-content: center; }
B-podlogka { justify-content: space-between; }
B-podlogka { justify-content: space-around; }
1.3. Вертикальное выравнивание align-items
Свойство используется для того, чтобы выровнять вертикально дочерние объекты внутри родительского flexbox-контейнера. Следует отметить, что под это выравнивание также подпадают и анонимные флекс-итемы. Данное правило не наследуется. Выравниваются только блоки первой строки.
align-items | |
---|---|
Значения: | |
stretch | Флексбокс-блоки, если не зафиксирована высота, вытягиваются на всю высоту родительского контейнера. Является первоначальным (базовым) параметром. |
flex-start | Предназначено для выравнивания флексбокс-итемов по верхней кромке контейнера-родителя с учетом внутренних отступов (padding). |
flex-end | Предназначено для выравнивания флексбокс-итемов по нижней кромке контейнера-родителя с учетом внутренних отступов (padding). |
center | Выравнивает дочерние флекс-блоки внутри флекс-контейнера по средней линии самого высокого блока. |
baseline | Выравнивает дочерние флекс-блоки внутри родительского относительно средней линии текста в этих блоках. |
initial | |
inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
B-podlogka { align-items: stretch; -webkit-align-items: stretch; }
Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto; .
B-podlogka { align-items: flex-start; }
B-podlogka { align-items: flex-end; }
B-podlogka { align-items: center; }
B-podlogka { align-items: baseline; }
1.4. Ориентация основной оси flex-direction
Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту?) и по горизонтали (в строку, по дефолту?).
Формат записи
B-podlogka { flex-direction: row; -webkit-flex-direction: row; }
B-podlogka { flex-direction: row-reverse; }
B-podlogka { flex-direction: column; }
B-podlogka { flex-direction: column-reverse; }
1.5. Размещение в несколько строк flex-wrap
Отвечает за размещение дочерних flex-блоков в одну или несколько строк.
flex-wrap | |
---|---|
Значения: | |
nowrap | В исходном состоянии все дочерние итемы располагаются в одну строчку (? или? в зависимости от выбранной ориентации текста). |
wrap | При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя (? или? в зависимости от выбранной ориентации текста). |
wrap-reverse | При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя, имея при этом реверсивный порядок чередования. |
initial | Будет установлено в первоначальное значение. |
inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
B-podlogka { flex-wrap: wrap; -webkit-flex-wrap: wrap; }
B-podlogka { flex-wrap: wrap-reverse; }
1.6. Направленность и многострочность одним правилом flex-flow
Данное правило используется, как более компактная запись двух предыдущих правил с целью оптимизации кода.
Формат записи
B-podlogka { flex-flow: row wrap; -webkit-flex-flow: row wrap; }
1.7. Выравниваем вертикально во всех строках align-content
Это цсс-правило используется для того, чтобы выровнять вертикально внутриконтейнейрные дочерние флекс-блоки. Для срабатывания этого правила необходимо, чтобы были у родительского контейнера заданы: height и flex-flow. Является не наследуемым.
align-content | |
---|---|
Значения: | |
stretch | Растягивание элементов на всю высоту родительского контейнера (у флекс-блоков не должна быть зафиксирована высота). |
flex-start | Выравнивает поверху. |
flex-end | Выравнивает понизу. |
center | Выравнивает вертикально по центру. |
space-between | Вертикально выравнивает внутриконтейнерные элементы таким образом, что первая линия блоков прижимается кверху, последняя — книзу, а пространство между остальными распределяется равномерно. |
space-around | Вертикально выравнивает внутриконтейнерные элементы таким образом, что расстояние в начале, в конце и между ними равны между собой. |
initial | Будет установлено в первоначальное значение. |
inherit | Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Пример кода
B-podlogka { height: 120px; flex-flow: row wrap; align-content: stretch; }
B-podlogka { align-content: flex-start; }
B-podlogka { align-content: flex-end; }
B-podlogka { align-content: center; }
B-podlogka { align-content: space-between; }
B-podlogka { align-content: space-around; }
Кроме правил, используемых в отношении родителя-контейнера, во флексбокс-сетке существует несколько правил, применяемых к дочерним элементам. Рассмотрим их подробнее.
2.1. Упорядочивание блоков order
ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.
Формат записи
B-div1 { -webkit-order: 1; order: 1; }
B-div5 { -webkit-order: -1; order: -1; }
2.2. Базис флекс-блока flex-basis
CSS-правило, предназначенное для фиксации ширины дочернего флекс-блока внутри родительского контейнера. Задается для срабатывания двух ниже лежащих параметров. Является не наследуемым правилом.
Пример кода
B-div3 { flex-basis: 70px; -webkit-flex-basis: 70px; }
Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.
Модуль Flexbox Layout (Flexible Box) направлен на то чтобы предоставить более эффективный способ расположения, выравнивания и распределения свободного пространства между элементами в контейнере, даже когда их размер заранее неизвестен и/или динамичен (поэтому слово "flex").
Основная идея гибкой (flex) разметки заключается в том, чтобы предоставить контейнеру возможность изменять ширину/высоту (и порядок) своих элементов, для того чтобы наилучшим образом заполнить доступное пространство (в основном для размещения на всех типах и размерах экранов). Flexbox контейнер расширяет элементы чтобы заполнить свободное пространство или сжимает их чтобы избежать переполнения.
Самое главное, что Flexbox это направленный агностик в отличии от обычных раскладок (блоков основанных на вертикальном позиционировании и строковых элементов основанных на горизонтальном позиционировании). Не смотря на то что они достаточно хорошо работают, им не хватает гибкости для поддержки больших или сложных приложений (особенно когда речь идёт об изменении ориентации, изменении размеров, растягивании, сжатии и т. д.).
Примечание. Flexbox больше подходит для компонентов приложения и небольших макетов, тогда как CSS Grid предназначен для более масштабных макетов.
Основы и терминология
Так как Flexbox - это целый модуль, а не отдельное свойство, он содержит множество различных вещей, включая целый набор свойств. Некоторые из них предназначены для установки их контейнеру (родительский элемент, известный как "flex-контейнер"), а другие должны устанавливаться дочерним элементам (известные как "flex-элементы").
Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на "flex-flow направлениях". Пожалуйста взгляните на этот рисунок из спецификации, объясняющий основную идею Flexbox.
В основном элементы будут располагаться вдоль основной оси (от main-start к main-end) или попереченой оси (от cross-start к cross-end).
Поддержка браузерами
CSS Flexible Box Layout Module
Chrome for Android
Браузер Blackberry начиная с 10 версии поддерживает новый синтаксис.
Свойства для контейнера
Свойства для элементов
Свойства для родительского элемента (Flex-контейнера)
display
Определяет flex-контейнер; строковый или блочный зависит от переданного значения. Включает flex-контекст для всех своих прямых, дочерних элементов.
Container { display: flex; /* или inline-flex */ }
Обратите внимание, что CSS колонки не влияют на flex-контейнер.
flex-direction
Устанавливает основную ось, таким образом определяет направление элементов расположенных в контейнере. Flexbox (помимо опциональной обёртки) представляет собой концепцию однонаправленного макета. Думайте о flex-элементах, прежде всего как горизонтальных строках или вертикальных колонках.
Container { flex-direction: row | row-reverse | column | column-reverse; }
- row (по умолчанию) - слева направо в ltr ; справа налево в rtl ;
- row-reverse - справа налево в ltr ; слева направо в rtl ;
- column - тоже самое что row , только сверху вниз;
- column-reverse - тоже самое что row-reverse , только снизу вверх;
flex-wrap
По умолчанию, элементы будут пытаться заполнить только одну строк. Вы можете изменить это поведение и позволить элементам переноситься на следующую строку, при необходимости.
Container{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap (по умолчанию) - все flex-элементы будут расположены на одной строке;
- wrap - flex-элементы будут расположены на нескольких строках, сверху вниз;
- wrap-reverse - flex-элементы будут расположены на нескольких строках, снизу вверх;
justify-content
Определяет выравнивание вдоль основной оси. Это помогает распределить свободное пространство, оставшееся после того как все фиксированные и не фиксированные по ширине flex-элементы достигли максимального размера. Оно также помогает осуществлять некоторый контроль над выравниванием элементов, когда они переполняют строку.
Container { justify-content: flex-start | flex-end | center | space-between | space-around; }
- flex-start (по умолчанию) - элементы прижимаются к началу строки;
- flex-end - элементы прижимаются к концу строки;
- center - элементы располагаются по центру вдоль строки;
- space-between - элементы размещаются равномерно на линии; первый элемент находится в начале строки, последний элемент находится в конце строки;
- space-around - элементы размещаются равномерно на линии с одинаковым пространством возле них. Обратите внимание, что визуально пространство не одинаковое, так как у всех элементов одинаковое пространство с обеих сторон. У первого элемента будет одна единица пространства со стороны контейнера, но две единицы между ним и следующим элементом, потому что у следующего элемента также по одной единице с двух сторон.
align-items
Это свойство определяет поведение flex-элементов вдоль поперечной оси на текущей строке. Думайте о нём как о , только для поперечной оси (перпендикулярной основной оси).
Container { align-items: flex-start | flex-end | center | baseline | stretch; }
- flex-start - элементы размещаются в начале поперечной оси;
- flex-end - элементы размещаются в конце поперечной оси;
- center - элементы располагаются по центру поперечной оси;
- baseline - элементы выравниваются по базовой линии;
- stretch (по умолчанию) - растягиваются чтобы заполнить весь контейнер (по-прежнему соблюдают min-width / max-width);
align-content
Примечание. Это свойство не действует, когда есть только одна строка flex-элементов.
Container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
- flex-start - строки располагаются в начале контейнера;
- flex-end - строки располагаются в конце контейнера;
- center - строки размещаются по центру контейнера;
- space-between - строки распределяются равномерно, первая строка располагается в начале контейнера, а последняя строка в конце;
- space-around - строки распределяются равномерно, с одинаковым расстоянием между ними;
- stretch (по умолчанию) - строки растягиваются по всей ширине, чтобы занять оставшееся пространство;
Свойства для дочерних элементов (Flex элементов)
order
По умолчанию, все элементы располагаются в исходном для них порядке. Однако, свойство order управляет порядком, в котором располагаются элементы внутри контейнера.
Item {
order:
flex-grow
Свойство определяет возможность элемента увеличиваться в размере, при необходимости. Оно принимает безразмерное значение в качестве пропорции, которое определяет какое количество свободного пространства внутри контейнера должен занимать элемент.
Если у всех элементов свойство flex-grow установлено в 1 , то свободное пространство внутри контейнера будет равномерно распределено между всеми элементами. Если у одного из элементов значение установлено в 2 , то элемент будет занимать в два раза больше пространства, чем остальные (по крайней мере, попытается).
Item {
flex-grow:
Нельзя указывать отрицательные числа.
flex-basis
Определяет размер элемента по умолчанию, до распределения оставшегося пространства. Это может быть длина (20%, 5rem и т.д.) или ключевое слово. Ключевое слово auto означает "выглядеть как моё свойство width или height ". Ключевое слово content означает что "размер основан на содержимом элемента" - это ключевое слово пока не очень хорошо поддерживается, поэтому его трудно проверить, а ещё труднее узнать что делают его братья min-content , max-content и fit-content .
Item {
flex-basis:
Если установить значение 0 , то дополнительное пространство вокруг содержимого не будет учитываться. Если установить auto , дополнительное пространство будет распределяться на основе значения .
flex
Это сокращение для , и . Второй и третий параметры (flex-shrink и flex-basis) не обязательны. Значение по умолчанию установлено в 0 1 auto .
Item { flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
align-self
Это свойство позволяет переопределить выравнивание по умолчанию (или заданное с помощью свойства ) для отдельных flex-элементов.
Пожалуйста посмотрите на объяснение свойства , чтобы понимать доступные значения.
Item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
Обратите внимание, что float , clear и vertical-align не оказывают никакого влияния на flex-элемент.
Примеры
Давайте начнём с самого простого примера, решающего задачу, которая возникает почти каждый день: идеальное центрирование. Не может быть ничего проще, если вы используете Flexbox.
Parent { display: flex; height: 300px; } .child { width: 100px; height: 100px; margin: auto; }
Это зависит от того, что margin , установленный в auto у flex-контейнера, поглощает дополнительное пространство. Таким образом, установка вертикального margin в auto у элемента, сделает элемент идеально центрированным по обеим осям.
Теперь давайте используем ещё несколько свойств. Рассмотрим список из 6 элементов, все с фиксированным размером в эстетическом отношении, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены вдоль горизонтальной оси и чтобы при изменении размера браузера всё было в порядке (без медиа-запросов!).
Flex-container { display: flex; flex-flow: row wrap; justify-content: space-around; }
Готово! Всё остальное, это лишь некоторые проблемы дизайна. Ниже приведён пример на CodePen, обязательно зайдите туда и попробуйте изменить размер окон, чтобы посмотреть что произойдёт.
Давайте попробуем что-нибудь ещё. Представьте, что у нас есть навигация расположенная по правому краю в самой верхней части экрана, но мы хотим чтобы она располагалась по центру на экранах среднего размера и была в одну колонку на маленьких экранах. Проще простого.
Navigation { display: flex; flex-flow: row wrap; justify-content: flex-end; } @media all and (max-width: 800px) { .navigation { justify-content: space-around; } } @media all and (max-width: 500px) { .navigation { flex-direction: column; } }
Давайте попробуем сделать что-нибудь ещё лучше, играясь с гибкостью наших flex-элементов! Как насчёт трёхколоночного mobile-first макета с шапкой и футером на всю ширину экрана, и чтобы не было зависимости от исходного порядка элементов.
Wrapper { display: flex; flex-flow: row wrap; } .header, .main, .nav, .aside, .footer { flex: 1 100%; } @media all and (min-width: 600px) { .aside { flex: 1 auto; } } @media all and (min-width: 800px) { .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } }
Связанные свойства
Ошибки
Безусловно Flexbox не без ошибок. Лучшая коллекция, которую я видел представлена Philip Walton и Greg Whitworth"s Flexbugs . Это Open Source место для отслеживания всех ошибок, поэтому я думаю, что лучше всего просто оставить ссылку.
And send us a pull request.
For most purposes, authors should set flex to one of the following values: auto , initial , none , or a positive unitless number. To see the effect of these values, try resizing the flex containers below:
By default flex items don"t shrink below their minimum content size. To change this, set the item"s min-width or min-height .
Syntax
/* Keyword values */ flex: auto; flex: initial; flex: none; /* One value, unitless number: flex-grow */ flex: 2; /* One value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* Two values: flex-grow | flex-basis */ flex: 1 30px; /* Two values: flex-grow | flex-shrink */ flex: 2 2; /* Three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Global values */ flex: inherit; flex: initial; flex: unset;The flex property may be specified using one, two, or three values.
Values
initial The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting " flex: 0 1 auto ". auto The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting " flex: 1 1 auto ". none The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting " flex: 0 0 auto ". " name="%7B%LS%7D"flex-grow">"> <"flex-grow"> Defines the flex-grow " name="%7B%LS%7D"flex-shrink">"> "><"flex-shrink"> Defines the flex-shrink of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. " name="%7B%LS%7D"flex-basis">"> "><"flex-basis"> Defines the flex-basis of the flex item. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted.Formal syntax
none "><"flex-grow"> "><"flex-shrink"> "><"flex-basis">Example
#flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; }Var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); #flex-container { width: 100%; font-family: Consolas, Arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of "flex" in that specification. |
Candidate Recommendation | Initial definition |
Initial value | |
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Browser compatibility
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
flex | Chrome
Full support
29 Full support
29
Full support
21 Prefixed Prefixed | Edge
Full support
12 Full support
12
Full support
12 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Firefox
Full support
20 Notes Full support 20Notes Notes Since Firefox 28, multi-line flexbox is supported. Notes Before Firefox 32, Firefox wasn"t able to animate values starting or stopping at 0 . Notes Until Firefox 61, flex items that are sized according to their content are sized using fit-content , not max-content . No support 18 - 28Disabled Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 48Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. | IE
Full support
11 Notes Full support 11Notes Notes Internet Explorer 11 ignores uses of in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. Notes Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info. Full support 10 |
One of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time. It enabled proper vertical alignment, so we can at last easily center a box. In this guide, we will take a thorough look at how the alignment and justification properties work in Flexbox.
To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case the inline axis running horizontally.
You can take a look at the code of this example below. Change the size of the container or nested element and the nested element always remains centered.
Properties that control alignment
The properties we will look at in this guide are as follows.
- justify-content - controls alignment of all items on the main axis.
- align-items - controls alignment of all items on the cross axis.
- align-self - controls alignment of an individual flex item on the cross axis.
- align-content - described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.
We will also discover how auto margins can be used for alignment in flexbox.
Note : The alignment properties in Flexbox have been placed into their own specification - CSS Box Alignment Level 3 . It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.
The Cross Axis
The align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column .
We are making use of cross-axis alignment in the most simple flex example. If we add display: flex to a container, the child items all become flex items arranged in a row. They will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. If your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item.
The reason the items become the same height is that the initial value of align-items , the property that controls alignment on the cross axis, is set to stretch .
We can use other values to control how the items align:
- align-items: flex-start
- align-items: flex-end
- align-items: center
- align-items: stretch
- align-items: baseline
In the live example below, the value of align-items is stretch . Try the other values and see how all of the items align against each other in the flex container.
Aligning one item with align-self
The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto , which will reset the value to that which is defined on the flex container.
In this next live example, the flex container has align-items: flex-start , which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-self: stretch ; another item has been selected using its class of selected and given align-self: center . You can change the value of align-items or change the values of align-self on the individual items to see how this works.
Changing the main axis
So far we have looked at the behaviour when our flex-direction is row , and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.
If we change our flex-direction to column, align-items and align-self will align the items to the left and right.
You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.
Aligning content on the cross axis - the align-content property
So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines .
For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.
The align-content property takes the following values:
- align-content: flex-start
- align-content: flex-end
- align-content: center
- align-content: space-between
- align-content: space-around
- align-content: stretch
- align-content: space-evenly (not defined in the Flexbox specification)
In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between , which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.
Try out the other values to see how the align-content property works.
Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.
Note : the value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.