Руководство по flexbox в CSS3

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+2), т. е. ¹/₄ свободного пространства каждый, тогда как второй flex-элемент будет занимать ²/_(1+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 в одном объявлении. Он принимает те же значения, что и отдельные свойства; значения могут быть указаны в любом порядке.