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 в одном объявлении. Он принимает те же значения, что и отдельные свойства; значения могут быть указаны в любом порядке.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.