Flexbox layouts (гибкий макет), представляет собой новую модель, введенную в CSS3 для создания гибкой сетки пользовательского интерфейса с несколькими строками и столбцами без использования процентных или фиксированных значений.
Использование флексов предоставляют простой и мощный механизм для автоматического распределения пространства и выравнивания контента через CSS-стили без вмешательства в фактическую разметку.
В следующем примере показано, как создать макет из трех столбцов, в котором каждый столбец имеет одинаковую ширину и высоту, используя flex-модель.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
border: 1px solid #808080;
}
.flex-container div {
background: #dbdfe5;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Обратите внимание, что в приведенном выше примере мы не указали ширину для внутренних <div>
.flex-container
, но в выводе вы увидете, что каждый столбец имеет ширину, которая точно равна одной трети родительского элемента .flex-container
.
Как работает Flex Layout
Flexbox состоит из гибких контейнеров (flex containers) и гибких элементов (flex items). Flex-контейнер можно создать, установив для свойства display
элемента либо flex
(генерирует блочный flex-контейнер), либо inline-flex
(генерирует строчный flex-контейнер, аналогичный inline-block
). Все дочерние элементы flex-контейнера автоматически становятся flex-элементами и размечаются с использованием модели flex-layout. Свойства float
, clear
, и vertical-align
не влияют на flex-элементы.
Flex-элементы расположены внутри flex-контейнера вдоль линии Flex, контролируемой свойством flex-direction
. По умолчанию в каждом flex-контейнере есть только одна линия сгиба, ориентация которой совпадает с инлайн-осью текущего режима ввода или направления текста. Следующая иллюстрация поможет вам понять терминологию flex-макета.

Управление потоком внутри Flex-контейнера
В стандартной блочной модели CSS элементы обычно отображаются в том порядке, в котором они объявлены в основной разметке HTML. Flex-модель позволяет контролировать очередность элементов внутри гибкого контейнера таким образом, чтобы элементы можно было размещать в любом направлении потока влево, вправо, вниз или даже вверх.
Поток flex-элементов во flex-контейнере можно указать с помощью свойства flex-direction
. Значением этого свойства по умолчанию является row
, оно совпадает с текущим режимом объявления элементов в документе или с направлением текста, например, слева направо на английском языке.
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
/* Standard syntax */
display: flex;
flex-direction: row-reverse;
border: 1px solid #666;
}
Аналогично, вы можете отображать flex-элементы внутри flex-контейнера в столбцах, а не в строке, используя значение column
для свойства flex-direction
, например так:
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: column;
/* Standard syntax */
display: flex;
flex-direction: column;
}
Управление размерами flex-элементов
Наиболее важным аспектом гибкого макета является способность flex-элементов изменять свою ширину или высоту, чтобы заполнить доступное пространство. Это достигается с помощью свойства flex
. Это короткое свойство для частных свойств flex-grow
, flex-shrink
и flex-basis
.
Flex-контейнер распределяет свободное пространство по своим элементам пропорционально их коэффициенту (flex grow) или сжимает их, чтобы предотвратить переполнение, пропорциональное их коэффициенту (flex shrink).
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
}
.flex-container div {
padding: 10px;
background: #dbdfe5;
}
.item1, .item3 {
-webkit-flex: 1; /* Safari */
flex: 1; /* Standard syntax */
}
.item2 {
-webkit-flex: 2; /* Safari */
flex: 2; /* Standard syntax */
}
В приведенном выше примере первый и третий flex-элементы будут занимать 1/(1+1+2)
, т. е. 1/4
свободного пространства каждый, тогда как второй flex-элемент будет занимать 2/(1+1+2)
, т. е. 1/2
свободного места. Аналогично вы можете создавать другие гибкие макеты, используя эту простую технику.
Настоятельно рекомендуется использовать сокращенное свойство flex
, а не отдельные свойства, поскольку оно корректно сбрасывает неопределенные компоненты.
Выравнивание Flex-элементов внутри Flex-контейнера
Для этого есть четыре свойства justify-content
, align-content
, align-items
и align-self
которые предназначены для управления выравниванием flex-элементов внутри flex-контейнера. Первые три из них применяются ко flex-контейнерам, тогда как последний относится к отдельным flex-элементам.
Выравнивание Flex-элементов по горизонтальной оси X
Flex-элементы могут быть выровнены вдоль главной оси X (то есть в горизонтальном направлении) flex-контейнера, используя свойство justify-content
. Оно обычно используется, когда flex-элементы не используют все доступное горизонтальное пространство.
Свойство justify-content
принимает следующие значения:
- flex-start — значение по умолчанию. Flex-элементы размещаются в начале главной оси;
- flex-end — flex-элементы размещаются в конце главной оси;
- center — flex-элементы размещаются в центре главной оси с равным количеством свободного пространства на обеих сторонах. Если оставшееся свободное пространство отрицательно, т.е. если элементы «переполняются», то flex-элементы будут «переполнены» одинаково в обоих направлениях;
- space-between — flex-элементы распределяются равномерно вдоль главной оси, где первый элемент размещается вначале контейнера, а последний — в конце. Если элементы «переполнены» или есть только один элемент, это значение равно
flex-start
; - space-around — flex-элементы распределяются равномерно с половинными пространствами на обеих сторонах. Если они «переполнены» или есть только один элемент, это значение идентично
center
.
В следующем примере показано влияние различных значений свойства justify-content
на flex-контейнер с несколькими столбцами, имеющий фиксированную ширину.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
/* Standard syntax */
display: flex;
justify-content: space-around;
}
.item1 {
width: 75px;
background: #e84d51;
}
.item2 {
width: 125px;
background: #7ed636;
}
.item3 {
width: 175px;
background: #2f97ff;
}
Выравнивание Flex-элементов по вертикальной оси Y
Flex-элементы могут быть выровнены вдоль поперечной оси Y (то есть в перпендикулярном направлении) flex-контейнера с помощью свойства align-items
или align-self
. Однако, если align-items
применяется к flex-контейнеру, свойство align-self
применяется к отдельным flex-элементам и переопределяет align-items
. Оба свойства принимают следующие значения:
- flex-start — flex-элементы размещаются в начале поперечной оси;
- flex-end — flex-элементы размещаются в конце поперечной оси;
- center — flex-элементы размещаются в центре поперечной оси с равным количеством свободного пространства на обоих концах. Если оставшееся свободное пространство отрицательно, т.е. если элементы переполняются, то flex-элементы будут «переполнены» одинаково в обоих направлениях;
- baseline — текстовая базовая линия (или внутренняя ось) каждого flex-элемента выровнена с базовой линией flex-элемента с наибольшим
font-size
; - stretch — flex-элемент растягивается, чтобы заполнить текущую строку или столбец, если это не ограничено минимальной и максимальной шириной или высотой. Значение установлено по умолчанию для
align-items
.
В следующем примере показано влияние различных значений свойства align-items
на гибкий контейнер с несколькими столбцами, имеющий фиксированную высоту.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-align-items: center;
/* Standard syntax */
display: flex;
align-items: center;
}
.item1 {
width: 75px;
height: 100px;
background: #e84d51;
}
.item2 {
width: 125px;
height: 200px;
background: #7ed636;
}
.item3 {
width: 175px;
height: 150px;
background: #2f97ff;
}
Вы также можете распределить свободное пространство по поперечной оси гибкого контейнера из нескольких строк или нескольких столбцов. Свойство align-content
используется для выравнивания линий flex-контейнера, например строк в многострочном flex-контейнере, когда на поперечной оси имеется дополнительное пространство, аналогично тому, как justify-content
выравнивает отдельные элементы на главной оси X.
Свойство align-content
принимает те же значения, что и justify-content
, но применяет их к поперечной оси, а не к главной. Он также принимает еще одно значение:
- stretch — свободное пространство распределяется поровну между всеми строками или столбцами, увеличивая их поперечный размер. Если оставшееся свободное пространство отрицательно, это значение идентично
flex-start
.
В следующем примере показано влияние различных значений свойства align-content
на многострочный flex-контейнер с фиксированной высотой.
.flex-container {
width: 500px;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
/* Standard syntax */
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.flex-container div {
width: 150px;
height: 100px;
background: #dbdfe5;
}
Изменение порядка Flex-элементов
В дополнение к изменению потока во flex-контейнере вы также можете изменить порядок отображения отдельных flex-элементов с помощью свойства order
. Это свойство принимает положительное или отрицательное целое число в качестве значения. По умолчанию все flex-элементы отображаются и располагаются в том же порядке, в котором они отображаются в HTML-разметке, т.к. значение по умолчанию order
равно 0
.
В следующем примере показано, как управлять порядком отдельных flex-элементов.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.flex-container div {
padding: 10px;
width: 130px;
}
.item1 {
background: #e84d51;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
background: #7ed636;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
background: #2f97ff;
-webkit-order: -1; /* Safari 6.1+ */
order: -1;
}
Элемент с наименьшим значением order
будет расположен первым, тогда как элемент с наивысшим значением order
последним. Элементы с одинаковыми значениями order
отображаются в том же порядке, в котором указаны в исходном документе.
Вертикальное и горизонтальное центрирование с Flexbox
Раньше вертикальное выравнивание блока контента включало использование JavaScript или некоторые уродливые CSS-трюки. Но с flexbox вы можете это легко сделать без каких-либо танцев с бубном.
В следующем примере показано, как легко центрировать блок контента по вертикали и горизонтали.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex; /* Standard syntax */
}
.item {
width: 300px;
padding: 25px;
margin: auto;
background: #f0e68c;
}
Использование flex-wrap для Flex-элементов
По умолчанию гибкие контейнеры отображают только одну строку или столбец flex-элементов. Однако вы можете использовать свойство flex-wrap
во flex-контейнере, чтобы контролировать, будут ли его flex-элементы переноситься на несколько строк или нет, если для них недостаточно места на одной flex-линии.
Свойство flex-wrap
принимает следующие значения:
- nowrap — значение по умолчанию. Гибкие элементы размещены в одну строку. Это может вызвать переполнение, если на flex-линии недостаточно места;
- wrap — flex-контейнер разбивает свои flex-элементы на несколько строк, подобно тому, как текст переносится на новую строку, когда для него недостаточно места;
- wrap-reverse — flex-элементы будут переноситься, если необходимо, но в обратном порядке.
В следующем примере показано, как отображать flex-элементы в одной или нескольких строках внутри flex-контейнера с помощью свойства flex-wrap
.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
/* Standard syntax */
display: flex;
flex-wrap: wrap;
}
.flex-container div{
width: 130px;
padding: 10px;
background: #dbdfe5;
}
Вы также можете использовать сокращенное CSS-свойство flex-flow
для установки как flex-direction
, так и flex-wrap
в одном объявлении. Он принимает те же значения, что и отдельные свойства; значения могут быть указаны в любом порядке.