Css флексбоксы: Основные понятия Flexbox — CSS — Вебджем.рф

Содержание

Основные понятия Flexbox — CSS

CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье даётся краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.

Когда мы описываем flexbox как одномерно-направленный, мы имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.

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

Главная ось

Главная ось определяется свойством flex-direction, которая может принимать одно из следующих значений:

row
row-reverse
column
column-reverse

Если вы выберете row или row-reverse, ваша главная ось будет проходить в горизонтальном направлении (inline direction).

Если вы выберете column или column-reverse, ваша главная ось будет проходить в вертикальном направлении (block direction).

Побочная ось

Побочная ось проходит перпендикулярно главной оси, поэтому, если свойство flex-direction (главная ось) задано как row или row-reverse, побочная ось будет проходить в вертикальном направлении.

Если свойство flex-direction задано как column или column-reverse, побочная ось будет проходить в горизонтальном направлении.

Понимание того, с какой осью вы работаете (главная или побочная) очень важно для дальнейшего изучения Flexbox.

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

Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.

Если свойству flex-direction

задано значение row и вы работаете с английским языком, то начало главной оси будет слева, а конец главной оси – справа.

Если бы вы работаете с арабским языком, то начало главной оси будет справа, а конец главной оси – слева.

В обоих случаях начало побочной оси находится вверху flex контейнера, а конец – внизу, поскольку оба языка имеют режим горизонтальной записи.

Спустя некоторое время становится естественным думать о начале и конце оси, а не о левом и правом краях. Это будет полезно для вас при работе с другими методами, такими как CSS Grid Layout, которые следуют тем же шаблонам.

Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаём значение flex или inline-flex для свойства display контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

Элементы отображаются в ряд (свойство flex-direction по умолчанию имеет значение row).
Позиционирование элементов начинается от начала главной оси.
Элементы не растягиваются по основной оси, но могут сжиматься.
Элементы будут растягиваться, чтобы заполнить размер побочной оси.
Свойству flex-basis задано значение auto.
Свойству flex-wrap задано значение nowrap.

Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обёрнуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.

Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.

Изменение flex-direction

Добавление свойства flex-direction в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка flex-direction: row-reverse сохранит порядок отображения элементов вдоль строки, однако начало и конец строки поменяются местами.

Если изменить значение свойства flex-direction на column, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра column-reverse, начало и конец столбца поменяются местами.

В приведённом ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column иcolumn-reverse, чтобы посмотреть как изменятся элементы контейнера.

Несмотря на то, что флекс-бокс — это однонаправленная модель, есть возможность завернуть наши флекс-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый флекс контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.

Чтобы включить такое поведение, добавьте параметр flex-wrap со значением wrap. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр

flex-wrap установлен в значение wrap, элементы переносятся. Если вы установите значение nowrap, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении nowrap будет происходить переполнение контейнера.

Более подробно эту тема разбирается в статье Разбираемся с обёртыванием Flex элементов.

Вы можете указать два свойства flex-direction и flex-wrap в одном flex-flow. Первое значение свойства определяет flex-direction, второе flex-wrap.

В приведённом ниже примере вы можете изменить первое значение на одно из доступных для flex-direction — row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.

Управлять поведением флекс-элементов более детально мы можем с помощью их собственных свойств:

flex-grow
flex-shrink
flex-basis

В этом обзоре мы лишь кратко рассмотрим эти свойства. Чтобы получить более глубокое понимание обратитесь к руководству Управление соотношением элементов вдоль главной оси.

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

Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остаётся 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.

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

Свойство

flex-basis

Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства — auto — в этом случае браузер проверяет, имеют ли элементы размер. В приведённом выше примере все элементы имеют ширину 100px, и этот размер читается браузером как

flex-basis. Если элементы не имеют размера, то для размера flex-basis используется размер контента.

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

Свойство

flex-grow

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

Свойство

flex-shrink

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

Примечание: Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

Краткая запись значений флекс свойств

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the flex shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is

flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis.

The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

flex: initial
flex: auto
flex: none
flex: <positive-number>

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of

flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

Try these shorthand values in the live example below.

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

align-items

The align-items property will align the items on the cross axis.

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

stretch
flex-start
flex-end
center

justify-content

The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

Try the following values of justify-content in the live example:

flex-start
flex-end
center
space-around
space-between
space-evenly

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS (en-US).

Last modified: 13 авг. 2022 г., by MDN contributors

Конспект «Флексбокс. Знакомство» — Флексбокс. Знакомство — HTML Academy

Флексбокс

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

Чтобы включить флексбокс, нужно задать элементу свойство display: flex;. После этого:

Элемент с display: flex; превращается во «флекс-контейнер».
Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают распределяться по новым правилам.

Главная и поперечная оси

Оси — одно из основных понятий во флексбоксах.

В обычном потоке документа блоки и текст располагаются слева направо и сверху вниз.

В привычной блочной модели направления «лево», «право», «верх» и «низ» неизменны. Но внутри флекс-контейнера эти понятия могут изменяться, потому что там можно изменять обычное направление потока.

Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы. Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.
Поперечной осью называется направление, перпендикулярное главной оси. Вдоль этой оси работают «вертикальные» выравнивания.

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction, которое задаётся для флекс-контейнера. Значения свойства:

Значение по умолчанию row — главная ось направлена слева направо.
column — главная ось направлена сверху вниз.
row-reverse — главная ось направлена справа налево.
column-reverse — главная ось направлена снизу вверх.

Поперечная ось всегда перпендикулярна главной оси и поворачивается вместе с ней:

Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.
Если главная ось направлена вертикально, то поперечная ось смотрит направо.

Таким образом, поперечная ось никогда не смотрит вверх или влево, и свойства для поворота поперечной оси нет.

Распределение флекс-элементов

Выравнивание по главной оси

CSS-свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси. Доступные значения justify-content:

Значение по умолчанию flex-start — элементы располагаются у начала главной оси.
flex-end — элементы располагаются в конце главной оси.
center — элементы располагаются по центру главной оси.
space-between — элементы располагаются так, что расстояния между соседними одинаковые, а между элементами и краями флекс-контейнера отступов нет.
space-around — элементы располагаются так, что расстояния между соседними одинаковые, а между элементами и краями флекс-контейнера есть отступ, равный половине расстояния между соседними элементами.
space-evenly — расстояния между соседними элементами и краями флекс-контейнера одинаковые.

Выравнивание по поперечной оси

CSS-свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси. Доступные значения align-items:

Значение по умолчанию stretch — элементы растягиваются на всю «высоту» флекс-контейнера.
flex-start — элементы располагаются у начала поперечной оси.
flex-end — элементы располагаются в конце поперечной оси.
center — элементы располагаются по центру поперечной оси.
baseline — элементы выравниваются по базовой линии текста внутри них.

Распределение элементов по главной оси задаётся для всего флекс-контейнера и на все флекс-элементы действует одинаково, задать какому-то элементу отличное от других распределение по главной оси нельзя.

Поперечное выравнивание можно задать каждому элементу отдельно. Для этого используется свойство align-self, которое задаётся для самих флекс-элементов, а не для флекс-контейнера. У свойства align-self те же самые значения, что и у align-items.

Перенос флекс-элементов

Если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд, то:

Они будут сжиматься до минимально возможной ширины.
Даже если им задать ширину, механизм флексбокса может её уменьшить.
Если они перестанут помещаться в контейнер и после уменьшения, то выйдут за его пределы, но продолжат располагаться в один ряд.

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

Значение по умолчанию nowrap — перенос флекс-элементов на новую строку запрещён.
wrap — разрешает перенос флекс-элементов на новую строку. Ряды элементов располагаются вдоль поперечной оси, первый ряд — в начале поперечной оси, последний — в конце.
wrap-reverse — также разрешает перенос флекс-элементов на новую строку. Ряды элементов располагаются в обратном порядке: первый — в конце поперечной оси, последний — в начале.

Выравнивание строк флекс-контейнера

Свойство align-content управляет выравниванием рядов флекс-элементов вдоль поперечной оси. У него и свойства justify-content очень похожие значения:

Значение по умолчанию stretch — растягивает ряды флекс-элементов, при этом оставшееся свободное место между ними делится поровну. Отображение строк при этом зависит от значения align-items:
1. Если у align-items задано значение stretch, то элементы в строках растягиваются на всю высоту своей строки.
2. Если значение отлично от stretch, то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items.
flex-start — располагает ряды флекс-элементов в начале поперечной оси.
flex-end — располагает ряды флекс-элементов в конце поперечной оси.
center — располагает ряды флекс-элементов в середине поперечной оси так, что отступов между соседними рядами нет, а расстояния между первым рядом и краем флекс-контейнера равно расстоянию между последним рядом и другим краем.
space-between — равномерно распределяет ряды флекс-элементов вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.
space-around — равномерно распределяет ряды флекс-элементов вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.
space-evenly равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами и у краёв одинаковые.

Свойство align-content «перекрывает» заданное значение align-items, которое управляет выравниванием флекс-элементов вдоль поперечной оси. Это происходит и в случае, когда есть только один ряд флекс-элементов, и когда рядов несколько.

Ранее в спецификации было описано другое поведение:

Если есть только один ряд флекс-элементов, то работает align-items.
Если есть несколько рядов, то работает align-content.

В начале 2019 года поведение было актуализировано согласно спецификации во всех современных браузерах, теперь его можно встретить только в старых браузерах.

Порядковый номер флекс-элемента

Порядок следования флекс-элементов в потоке можно изменять с помощью свойства order, порядкового номера флекс-элемента, не меняя при этом HTML-код.

По умолчанию порядковый номер флекс-элементов равен 0, а сортировка элементов производится по возрастанию номера. Порядковый номер задаётся целым числом, положительным или отрицательным.

Применение флексбоксов

Идеальное выравнивание

С помощью флексбокса можно отцентровать элемент по вертикали и горизонтали так, чтобы центровка сохранялась при изменении размеров элемента или контейнера.

Для этого нужно задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto. В этом случае флекс-элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали.

«Гибкое» меню

Флексбокс будет полезен, если нужно создать раскладку, в которой пункты равномерно распределены по блоку меню, при чём первый пункт примыкает к левой части блока меню, а последний — к правой, с небольшими внутренними отступами.

Чтобы это сделать, нужно задать меню раскладку флексбокса, тогда пункты станут флекс-элементами. Затем с помощью свойства распределения элементов justify-content: space-around; можно добиться нужного результата.

Если вы добавите в меню ещё один пункт, отступы между пунктами меню будут «гибко» меняться, подстраиваясь под новые условия.

Сортировка элементов на CSS

Используя одновременно флексбокс и селектор по выделению чекбокса :checked ~, можно с помощью этого селектора управлять порядком флекс-элементов, изменяя направление главной оси с помощью flex-direction.

Лучше всего эффект работает, когда направление главной оси меняется с «сверху вниз» на «снизу вверх». При этом флекс-контейнер должен находиться в разметке на одном уровне с чекбоксом.

Блоки одинаковой высоты

В обычной блочной модели есть фундаментальный недостаток — соседние блоки ничего не знают друг о друге, поэтому их высоты нельзя «связать». При этом надо учитывать, что содержимое блоков может быть разным и их высота может меняться.

На флексбоксах можно реализовать раскладку с блоками одинаковой высоты — флекс-элементы по умолчанию растягиваются на всю высоту контейнера. Для этого достаточно задать родительскому блоку display: flex;.

Продолжить

Flexbox CSS уроки для начинающих академия

❮ Назад Дальше ❯

Модуль компоновки CSS Flexbox

Перед модулем компоновки Flexbox было четыре режима компоновки:

Блок, для разделов на веб-странице
Встроенный, для текста
Таблица для двумерных табличных данных
Положение, для явного положения элемента

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования.

Flexbox элементы

Чтобы начать использовать модель Flexbox, необходимо сначала определить контейнер Flex.

Этот элемент представляет собой контейнер Flex (синяя область) с тремя элементами Flex.

Пример

Гибкий контейнер с тремя гибкими элементами:

Родительский элемент (контейнер)

Гибкий контейнер становится гибким, установив display свойство в значение Flex:

Пример

.flex-container {
display: flex;
}

Свойства контейнера Flex:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Свойство Flex-Direction

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

Пример

Значение Column суммирует элементы Flex по вертикали (сверху вниз):

.flex-container {
display: flex;
flex-direction: column;
}

Пример

Значение столбец-реверс суммирует элементы Flex по вертикали (но снизу вверх):

. flex-container {
display: flex;
flex-direction: column-reverse;
}

Пример

Значение Row суммирует элементы Flex горизонтально (слева направо):

.flex-container {
display: flex;
flex-direction: row;
}

Пример

Значение строка-реверс суммирует элементы Flex горизонтально (но справа налево):

.flex-container {
display: flex;
flex-direction: row-reverse;
}

Свойство Flex-Wrap

Свойство flex-wrap указывает, должны ли элементы Flex обернуть или нет.

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

Пример

Значение Wrap указывает, что элементы Flex будут обтекать при необходимости:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Пример

Значение UN Wrap указывает, что элементы Flex не будут обтекать (по умолчанию):

.flex-container {
display: flex;
flex-wrap: nowrap;
}

Пример

Значение Wrap-Reverse указывает, что гибкие элементы будут при необходимости обернуты в обратном порядке:

. flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

Свойство Flex-Flow

Свойство flex-flow является сокращенным свойством для задания свойств flex-direction и flex-wrap.

Пример

.flex-container {
display: flex;
flex-flow: row wrap;
}

Свойство «выравнивание-содержимое»

Свойство justify-content используется для выравнивания элементов Flex:

Пример

Значение Center выравнивает элементы Flex в центре контейнера:

.flex-container {
display: flex;
justify-content: center;
}

Пример

Значение Flex-Start выравнивает элементы Flex в начале контейнера (по умолчанию):

.flex-container {
display: flex;
justify-content: flex-start;
}

Пример

Значение Flex-End выравнивает элементы Flex в конце контейнера:

.flex-container {
display: flex;
justify-content: flex-end;
}

Пример

Значение пространство вокруг отображает элементы Flex с пробелами до, между и после строк:

. flex-container {
display: flex;
justify-content: space-around;
}

Пример

Значение пробел-между отображает элементы Flex с интервалом между строками:

.flex-container {
display: flex;
justify-content: space-between;
}

Свойство Выравнивание-элементы

Свойство align-items используется для выравнивания элементов Flex по вертикали.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-items .

Пример

Значение Center выравнивает элементы Flex в середине контейнера:

.flex-container {
display: flex;
height: 200px;
align-items: center;
}

Пример

Значение Flex-Start выравнивает элементы Flex в верхней части контейнера:

.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}

Пример

Значение Flex-End выравнивает элементы Flex в нижней части контейнера:

. flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}

Пример

Значение Stretch растягивает элементы Flex для заполнения контейнера (по умолчанию):

.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}

Пример

Значение Базовая линия выравнивает элементы Flex, такие как Выравнивание базовых линий:

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Свойство выравнивания содержимого

Свойство align-content используется для выравнивания гибких линий.

В этих примерах мы используем контейнер высотой 600 пикселей с свойством Flex-Wrap, который имеет значение Wrap, чтобы лучше продемонстрировать align-content свойство.

Пример

Значение пробел-между отображает гибкие линии с равным пространством между ними:

. flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}

Пример

Значение пространство вокруг отображает гибкие линии с пробелами до, между и после них:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}

Пример

Значение Stretch растягивает гибкие линии, чтобы занять оставшееся пространство (по умолчанию):

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}

Пример

Значение Center отображает гибкие линии в середине контейнера:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}

Пример

Значение Flex-Start отображает гибкие линии в начале контейнера:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}

Пример

Значение Flex-End отображает гибкие линии в конце контейнера:

. flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}

Идеальное центрирование

В следующем примере мы решим очень распространенную проблему стиля: идеальное центрирование.

Решение: Задайте для свойств justify-content и align-items значение Center и элемент Flex будут идеально центрированы:

Пример

.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}

Дочерние элементы (элементы)

Прямые дочерние элементы контейнера Flex автоматически становятся гибкими (Flex) элементами.

Вышеприведенный элемент представляет собой четыре синих элемента Flex внутри серого контейнера Flex.

Пример

Свойства элемента Flex:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Свойство Order

Свойство order указывает порядок элементов Flex.

Первый элемент Flex в коде не должен отображаться в качестве первого элемента макета.

Значение Order должно быть числом, значением по умолчанию является 0.

Пример

Свойство Order может изменить порядок элементов Flex:

Flex-расти собственности

Свойство flex-grow указывает, сколько гибкого элемента будет увеличиваться относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 0.

Пример

Сделать третий гибкий элемент расти в восемь раз быстрее, чем другие элементы Flex:

Свойство Flex-сжатие

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

Значение должно быть числом, значением по умолчанию является 1.

Пример

Не позволяйте третьему элементу Flex уменьшаться столько, сколько другие элементы Flex:

Свойство Flex-базиса

Свойство flex-basis указывает начальную длину элемента Flex.

Пример

Set the initial length of the third flex item to 200 pixels:

Свойство Flex

Свойство flex является сокращенным свойством для свойств flex-grow , flex-shrink и flex-basis.

Пример

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:

Свойство «выравнивание-само»

Свойство align-self задает выравнивание для выбранного элемента внутри гибкого контейнера.

Свойство align-self переопределяет выравнивание по умолчанию, заданное свойством align-items контейнера.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-self:

Пример

Совместите третий элемент Flex в середине контейнера:

Пример

Совместите второй элемент Flex в верхней части контейнера и третий элемент Flex в нижней части контейнера:

Адаптивная Галерея изображений с помощью Flexbox

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

Отзывчивый сайт с помощью Flexbox

Используйте Flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:

Поддержка браузера

Свойства Flexbox поддерживаются во всех современных браузерах.


29.0	11.0	22.0	10	48

Свойства Flexbox CSS

В следующей таблице перечислены свойства CSS, используемые с Flexbox:

Свойство	Описание
display	Указывает тип поля, используемого для элемента HTML
flex-direction	Задает направление гибких элементов внутри контейнера Flex
justify-content	Горизонтально выравнивает элементы Flex, если элементы не используют все доступное пространство на главной оси
align-items	Вертикальное выравнивание элементов Flex, если элементы не используют все доступное пространство на поперечной оси
flex-wrap	Указывает, должны ли элементы Flex обернуть или нет, если для них недостаточно места на одной гибкой линии
align-content	Изменяет поведение свойства Flex-Wrap. Он похож на выравнивание-элементы, но вместо выравнивания элементов Flex, он выравнивает гибкие линии
flex-flow	Сокращенное свойство для Flex-направление и Flex-Wrap
order	Задает порядок гибкого элемента относительно остальных элементов Flex внутри того же контейнера
align-self	Используется для элементов Flex. Переопределяет свойство выравнивания элементов контейнера
flex	Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства

❮ Назад Дальше ❯

Флексбокс «на пальцах». Вторая часть: перенос элементов

Флексбокс «на пальцах»

Оси и выравнивание
Перенос элементов

Вкратце напомню о флекс‑контейнере и флекс‑элементах. Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке. Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.

Флексбокс «на пальцах»

Оси и выравнивание
Перенос элементов

По умолчанию элементы внутри флекс‑контейнера раскладываются в одну строку. Если окажется, что элементам не хватает места, они переполнят его:

index.html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

style.css

.numbers {
  /* Включаем флексбокс */
  display: flex;
  /* Настраиваем направление раскладки */
  flex-direction: row;
  /* Прижимаем элементы к началу
     главной оси */
  justify-content: flex-start;
  /* Прижимаем элементы к началу 
     поперечной оси */
  align-items: flex-start;
}

Чтобы сделать флекс‑контейнер многострочным, используем flex-wrap: wrap или flex-wrap: wrap-reverse:

flex‑wrap: wrap

flex‑wrap: wrap‑reverse

flex-wrap: wrap-reverse раскладывает невмещающиеся элементы в направлении, противоположном поперечной оси: снизу вверх

При смене направления главной оси:

flex‑direction: column и flex‑wrap: wrap

flex‑direction: column и flex‑wrap: wrap‑reverse

flex‑direction: column и flex‑wrap: wrap

flex‑direction: column и flex‑wrap: wrap‑reverse

Из‑за смены направления flex-wrap: wrap-reverse раскладывает невмещающиеся элементы справа налево

Важный момент. За расположение элементов на поперечной оси отвечает свойство align-items. В многострочных контейнерах оно работает внутри строк, а для управления расстоянием между строк используется align-content:

align‑content: stretch

align‑content: center

align‑content: flex‑start

align‑content: flex‑end

align‑content: space‑around

align‑content: space‑between

Значение по умолчанию — align-content: stretch. С ним строки делят доступное пространство поровну

В примерах выше расстояние между элементами задано с помощью margin, что даёт дополнительные отступы до и после всех элементов. Чтобы не обнулять и не компенсировать их соседними элементами, лучше задавать отступы с помощью gap:

margin: 10px

gap: 20px

gap задаёт отступ между элементами, а не вокруг них. Указывается в контейнере, а не у самих элементов

Перенос во флексбоксе обычно используют для адаптивных колонок или набора элементов, которым не важна сетка. Например, для вёрстки облака тегов или вариантов ответа в чате:

index.html

<ul>
  <li>Иди лесом</li>
  <li>Иди опушкой</li>
  <li>Нет!</li>
  <li>Позови человека</li>
  <li>Не хотелось бы хвастаться. Давайте лучше обсудим вашу задачу</li>
  <li>Нет, благодарю. Я готов начинать</li>
</ul>

style.css

.replies {
  /* Включаем флексбокс */
  display: flex;
  /* Указываем направление главной оси:
     раскладка сверху вниз */
  flex-direction: row;
  /* Указываем направление на поперечной оси:
     прижимаем элементы вправо */
  align-items: flex-end;
  /* Включаем переносы */
  flex-wrap: wrap;
  /* Задаём отступ между элементами */
  gap: 10px;
}
/* Настраиваем варианты ответов */
. reply {
  padding: 10px 20px;
  border-radius: 25px;
  border: 1px solid #0b93f6;
  font: 18px/24px Helvetica Neue, Helvetica, Arial, sans-serif;
}
.reply:hover {
  background: #0b93f6;
  color: #fff;
}

Что запомнить

По умолчанию флекс‑контейнер однострочный: невмещающиеся элементы переполняют его. Чтобы сделать его многострочным и разрешить перенос элементов, используют flex-wrap: wrap

За расположение «строк» элементов по поперечной оси в многострочных контейнерах отвечает align-content

Ещё по теме

flex‑wrap на MDN
Flexbox Gap

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Отправить

Запинить

Твитнуть

Свежак

Визуальное руководство по свойствам Flexbox из CSS3 — CSS-LIVE

Перевод статьи A Visual Guide to CSS3 Flexbox Properties с сайта scotch. io, c разрешения автора— Димитара Стоянова.

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

Многие дизайнеры и разработчики находят flexbox-раскладку простой в использовании, т.к. позиционирование элементов проще, а следовательно, можно создавать более сложные раскладки меньшим кодом, что облегчает разработку. Алгоритм flexbox-раскладки основан на направлении, в отличие от блочной или строчной раскладки, которые основаны на вертикали и горизонтали. Эта flexbox-раскладка предназначена для небольших компонентов приложения, в то время, как CSS-Модуль сеточной раскладки развивается для обработки крупномасштабных раскладок.

Вместо того, чтобы объяснять, как работают flex-свойства, это руководство сосредоточится на том, как flex-свойства влияют на раскладку визуально.

Основы

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

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

Flexbox-раскладка прошла через многие итерации и несколько изменений синтаксиса по сравнению с исходным черновиком из 2009-го, поэтому, чтобы избежать путаницы, для ясности, мы будем использовать синтаксис только из последнего рабочего черновика (сентябрь 2014). Если вам нужна совместимость со старыми браузерами, то прочитайте эту статью о том, как сделать это наилучшим образом.

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

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

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

Применение

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

.flex-container {

 display: -webkit-flex; /* Safari */

 display: flex;

}

Или если вам нужно отобразить его как строчный элемент, то используйте:

.flex-container {

 display: -webkit-inline-flex; /* Safari */

 display: inline-flex;

}

Замечание: это свойство нужно установить только для родительского контейнера и все его непосредственные дочерние элементы автоматически станут flex-элементами.

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

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

flex-direction

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

Значения:

.flex-container {

 -webkit-flex-direction: row; /* Safari */

 flex-direction: row;

}

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

. flex-container {

 -webkit-flex-direction: row-reverse; /* Safari */

 flex-direction: row-reverse;

}

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

.flex-container {

 -webkit-flex-direction: column; /* Safari */

flex-direction: column;

}

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

.flex-container {

 -webkit-flex-direction: column-reverse; /* Safari */

 flex-direction: column-reverse;

}

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

Свойство по умолчанию: row

Замечание: row и row-reverse зависят от режима письма, поэтому в rtl-контексте они соответственно будут перевёрнуты.

flex-wrap

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

Значения:

.flex-container {

 -webkit-flex-wrap: nowrap; /* Safari */

 flex-wrap: nowrap;

}

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

.flex-container {

 -webkit-flex-wrap: wrap; /* Safari */

 flex-wrap: wrap;

}

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

.flex-container {

 -webkit-flex-wrap: wrap-reverse; /* Safari */

 flex-wrap: wrap-reverse;

}

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

Значение по умолчанию: nowrap

Замечание: эти свойства зависят от режима письма, поэтому в rtl-контексте они соответственно будут перевёрнуты.

flex-flow

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

Значения:

.flex-container {

 -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */

 flex-flow: <flex-direction> || <flex-wrap>;

Значение по умолчанию: row nowrap

justify-content

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

Значения:

.flex-container {

 -webkit-justify-content: flex-start; /* Safari */

 justify-content: flex-start;

}

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

.flex-container {

 -webkit-justify-content: flex-end; /* Safari */

 justify-content: flex-end;

}

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

.flex-container {

 -webkit-justify-content: center; /* Safari */

 justify-content: center;

}

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

.flex-container {

 -webkit-justify-content: space-between; /* Safari */

 justify-content: space-between;

}

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

.flex-container {

 -webkit-justify-content: space-around; /* Safari */

 justify-content: space-around;

}

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

Значение по умолчанию: flex-start

align-items

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

Значения:

.flex-container {

 -webkit-align-items: stretch; /* Safari */

 align-items: stretch;

}

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

.flex-container {

 -webkit-align-items: flex-start; /* Safari */

 align-items: flex-start;

}

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

.flex-container {

 -webkit-align-items: flex-end; /* Safari */

 align-items: flex-end;

}

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

.flex-container {

 -webkit-align-items: center; /* Safari */

 align-items: center;

}

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

.flex-container {

 -webkit-align-items: baseline; /* Safari */

 align-items: baseline;

}

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

Значение по умолчанию: stretch

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

align-content

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

Значения:

.flex-container {

 -webkit-align-content: stretch; /* Safari */

 align-content: stretch;

}

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

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

.flex-container {

 -webkit-align-content: flex-start; /* Safari */

 align-content: flex-start;

}

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

.flex-container {

 -webkit-align-content: flex-end; /* Safari */

 align-content: flex-end;

}

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

.flex-container {

 -webkit-align-content: center; /* Safari */

 align-content: center;

}

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

.flex-container {

 -webkit-align-content: space-between; /* Safari */

 align-content: space-between;

}

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

.flex-container {

 -webkit-align-content: space-around; /* Safari */

 align-content: space-around;

}

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

Значение по умолчанию: stretch

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

Замечания для flex-контейнеров

любые свойства column-* не влияют на flex-контейнер.
псевдоэлементы ::first-line and ::first-letter не применяются к flex-контейнеру.

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

order

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

Значения:

.flex-item {

 -webkit-order: <целое число>; /* Safari */

 order: <целое число>;

}

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

Значение по умолчанию: 0

flex-grow

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

Значения:

.flex-item {

 -webkit-flex-grow: <число>; /* Safari */

 flex-grow: <число>;

}

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

Второй flex-элемент занимает больше места относительно размера других flex-элементов.

Значение по умолчанию: 0

Замечание: отрицательные значения игнорируются.

flex-shrink

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

Значения:

.flex-item {

 -webkit-flex-shrink: <число>; /* Safari */

 flex-shrink: <число>;

}

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

Значение по умолчанию: 1

Замечание: отрицательные значения игнорируются.

flex-basis

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

Значения:

.flex-item {

 -webkit-flex-basis: auto | <ширина>; /* Safari */

 flex-basis: auto | <ширина>;

}

flex-basis указывается для 4-го flex-элемента и диктует его исходный размер.

Значение по умолчанию: auto

Замечание: есть проблема именования со значением auto, которая будет решена в будущем.

Прим. перев. в текущем редакторском черновике предлагается решить проблему с помощью введения дополнительного значения content: c этим значением базовый главный размер будет определяться по содержимому, а со значением auto — по значению свойства главного размера (width или height в зависимости от flex-direction)

flex

Это свойство – сокращённая запись для свойств flex-grow, flex-shrink и flex-basis. Наряду с другими значениями, его можно установить также в auto (1 1 auto) и none (0 0 auto).

.flex-item {

 -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */

 flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];

}

Значение по умолчанию: 0 1 auto

Замечание: W3C рекомендует использовать сокращённую запись вместо раздельных свойств компонентов, поскольку сокращённая запись правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

align-self

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

Для 3-го и 4-го элемента переопределено выравнивание при помощи свойства align-self.

Значение по умолчанию: auto

Замечание: значение auto для align-self вычисляется как значение align-items родительского элемента, либо stretch, если родительского элемента нет.

Замечания для flex-элементов

float, clear и vertical-align не влияют на flex-элемент и не вырывают его из потока.

Игровая площадка с Flexbox

Здесь представлена площадка для игр с flexbox, где можно поиграть с различными flex-свойствами и изучить силу раскладки flexbox. Комбинируйте некоторые flex-свойства, чтобы получить сложные раскладки.

See the Pen yNNZxr by Ilya Streltsyn (@SelenIT) on CodePen.

Также можно увидеть эту игровую площадку в полноэкранном примере здесь, или получить исходный код на GitHub.

P.S. Это тоже может быть интересно:

принцип работы, преимущества — учебник CSS

Модуль гибких блоков (англ. Flexible Box Layout Module) был представлен W3C как более эффективный инструмент для создания разметки, выравнивания и распределения элементов на веб-странице, даже если их размеры неизвестны (отсюда и слово «flex», что в переводе с английского означает «гибкость»).

Основная идея flexbox (так сокращенно называют этот модуль) — это дать возможность контейнеру изменять ширину, высоту и порядок дочерних элементов так, чтобы доступное пространство заполнялось наилучшим образом (в основном это нужно для обеспечения адаптивности веб-страницы). Flex-контейнер расширяет свои элементы с целью заполнения свободного места либо сжимает их, чтобы предотвратить переполнение.

Отличия Flexbox от обычной разметки

На прошлых уроках мы изучали, как создать макет с использованием свойства float. В процессе работы нам то и дело приходилось решать какие-то проблемы, искать обходные пути и применять различные хаки вместо того, чтобы просто создать макет.

Почему так сложно сделать обычный макет, используя привычные средства CSS? Дело в том, что HTML и CSS развивались очень стремительно. Сегодня с помощью CSS вы можете сотворить с веб-страницей практически всё что угодно. Но в самом начале, когда инструментов было не так много, веб-разработчики использовали доступные возможности для создания макетов. Именно поэтому раньше многие сайты верстались с помощью таблиц, так как это был единственный удобный способ управлять расположением элементов на странице. Позже разработчики стали использовать в макетах свойство loat, а также inline-block. А вертикальное выравнивание элементов — головная боль почти каждого верстальщика.

В итоге мы имеем множество разных хитроумных способов построить макет и выровнять элементы. И каждый из этих способов имеет свои недостатки, с которыми нужно либо мириться, либо бороться. Набирающий популярность модуль Flexbox призван кардинально изменить эту ситуацию и сильно облегчить работу веб-разработчикам. Флексбокс позволяет контролировать размеры элементов, управлять их выравниванием по нескольким осям, назначать порядок вывода и многое другое.

Преимущества Flexbox

Flexbox — мощный модуль, который включает в себя большой набор свойств и обладает большими возможностями. Рассмотрим основные преимущества flexbox:

Блоки легко становятся гибкими, элементы могут сжиматься и растягиваться, заполняя пространство.
Нет никаких проблем с тем, чтобы выровнять элементы по вертикали и горизонтали.
Неважно, в каком порядке расположены HTML-элементы. Вы можете изменить их порядок через CSS.
Элементы могут самостоятельно выстраиваться в ряд или образовывать столбец.
Очень простая адаптация под направление текста RTL (right-to-left). Если в браузере установлена локаль RTL, все flex-элементы автоматически отобразятся в обратном порядке.

Модель Flexbox

Как мы уже говорили, у модуля flexbox есть широкий набор свойств. Некоторые из этих свойств необходимо применять к контейнеру (родительскому элементу, т. н. flex-контейнеру), а некоторые — к его дочерним элементам (т. н. flex-элементам). В этом уроке мы рассмотрим те свойства, которые предназначены для flex-контейнера.

Чтобы получить возможность пользоваться модулем flexbox, первым делом необходимо задать родительскому контейнеру свойство display: flex, вот так:


.container {
    display: flex;
}

Это свойство превратит обычный блок во flex-контейнер. После этого дочерние элементы контейнера автоматически преобразуются во flex-элементы. Кроме этого, можно задать значение inline-flex, которое сделает flex-контейнер инлайновым (строчным).

Теперь давайте разберемся с принципом работы flex-раскладки. В отличие от блочной и строчной моделей, где размещение элементов основывается на принципах блочного и строчного потоков, flex-модель основана на гибких потоках.

Чтобы стало понятнее, ниже мы покажем схематическую иллюстрацию с основной терминологией flexbox, а также объясним каждый термин отдельно:

Иллюстрация различных направлений и размеров, применяемых к flex-контейнеру. Источник: w3.org

Оси Flexbox

Итак, оси flexbox — это основное понятие данной модели.

Главная ось flex-контейнера — это направление, в котором располагаются его дочерние элементы. У главной оси есть начало и конец (они обозначены на схеме).

Поперечная ось flex-контейнера — это направление, перпендикулярное главной оси. У поперечной оси тоже есть начало и конец (отмечены на схеме).

Если вашей актуальной локалью является LTR (left-to-right), то направление главной оси пролегает слева направо. Направление поперечной оси пролегает сверху вниз.

В следующем уроке вы узнаете, какие существуют специальные CSS-свойства для flex-контейнера.

Flexbox — Изучите веб-разработку

Предыдущий
Обзор: макет CSS
Следующий

Flexbox — это метод одномерной компоновки для размещения элементов в строках или столбцах. Элементы изгибаются (расширяются), чтобы заполнить дополнительное пространство, или сжимаются, чтобы поместиться в меньшие пространства. В этой статье объясняются все основы.

Предпосылки:	Основы HTML (изучение Введение в HTML) и представление о том, как работает CSS (изучите Введение в CSS.)
Цель:	Чтобы узнать, как использовать систему макетов Flexbox для создания веб-макетов.

Долгое время единственными надежными кросс-браузерными инструментами, доступными для создания макетов CSS, были такие функции, как плавающие элементы и позиционирование. Они работают, но в некотором смысле они также ограничивают и разочаровывают.

Следующие простые макеты трудно или невозможно выполнить с помощью таких инструментов любым удобным и гибким способом:

Вертикальное центрирование блока содержимого внутри его родителя.
Заставляет все дочерние элементы контейнера занимать равную часть доступной ширины/высоты, независимо от доступной ширины/высоты.
Приведение всех столбцов в макете с несколькими столбцами к одинаковой высоте, даже если они содержат разное количество содержимого.

Как вы увидите в последующих разделах, flexbox значительно упрощает многие задачи по макетированию. Давайте копать!

В этой статье вы выполните ряд упражнений, которые помогут вам понять, как работает flexbox. Для начала вам нужно сделать локальную копию первого начального файла — flexbox0.html из нашего репозитория GitHub. Загрузите его в современный браузер (например, Firefox или Chrome) и просмотрите код в редакторе кода. Вы также можете увидеть это вживую здесь.

Вы увидите, что у нас есть элемент

с заголовком верхнего уровня внутри него и

элемент, содержащий три

s. Мы собираемся использовать их для создания довольно стандартного макета из трех столбцов.

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

, поэтому мы устанавливаем это на

 section {
  дисплей: гибкий;
}

Это приводит к тому, что элемент

становится гибким контейнером , а его дочерние элементы становятся гибкими элементами .

Результат должен быть примерно таким:

Итак, это единственное объявление дает нам все, что нам нужно. Невероятно, правда? У нас есть макет из нескольких столбцов со столбцами одинакового размера, и все столбцы имеют одинаковую высоту. Это связано с тем, что значения по умолчанию, присвоенные flex-элементам (дочерним элементам flex-контейнера), настроены для решения общих проблем, таких как эта.

Для ясности повторим, что здесь происходит. Элемент, которому мы присвоили display значение flex , действует как блочный элемент с точки зрения того, как он взаимодействует с остальной частью страницы, но его дочерние элементы расположены как гибкие элементы. В следующем разделе более подробно объясняется, что это значит. Также обратите внимание, что вы можете использовать значение display inline-flex , если вы хотите разместить дочерние элементы элемента как flex-элементы, но чтобы этот элемент вел себя как встроенный элемент.

Когда элементы размещаются как flex-элементы, они располагаются по двум осям:

Основная ось — это ось, идущая в направлении расположения гибких элементов (например, в виде строк на странице или столбцов вниз по странице). Начало и конец этой оси называются главный пуск и главный конец .
Поперечная ось — это ось, идущая перпендикулярно направлению размещения гибких элементов. Начало и конец этой оси называются крестовина начала и крестовина конца .
Родительский элемент, для которого установлено display: flex (в нашем примере
), называется flex-контейнером .
Элементы, размещенные в виде гибких блоков внутри контейнера flex, называются гибкими элементами (в нашем примере это элементы
).

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

Flexbox предоставляет свойство, называемое flex-direction , которое указывает, в каком направлении проходит главная ось (в каком направлении расположены дочерние элементы flexbox). По умолчанию установлено значение row , что приводит к тому, что они располагаются в ряд в том направлении, в котором работает язык вашего браузера по умолчанию (слева направо, в случае английского браузера).

Попробуйте добавить следующее объявление в правило

 flex-direction: column;

Вы увидите, что это помещает элементы обратно в макет столбца, как это было до того, как мы добавили какой-либо CSS. Прежде чем двигаться дальше, удалите это объявление из своего примера.

Примечание: Вы также можете размещать гибкие элементы в обратном направлении, используя значения row-reverse и column-reverse . Поэкспериментируйте и с этими значениями!

Одна из проблем, которая возникает, когда у вас есть фиксированная ширина или высота в вашем макете, заключается в том, что в конечном итоге ваши дочерние элементы flexbox переполнят свой контейнер, нарушив макет. Взгляните на наш пример flexbox-wrap0.html и попробуйте просмотреть его вживую (сделайте локальную копию этого файла сейчас, если хотите следовать этому примеру):

Здесь мы видим, что дети действительно вырываются из контейнера. Один из способов исправить это — добавить следующее объявление в правило

 flex-wrap: wrap;

Кроме того, добавьте следующее объявление в правило

 flex: 200px;

Попробуйте прямо сейчас. Вы увидите, что макет выглядит намного лучше, если в него включены:

Теперь у нас есть несколько строк. В каждую строку помещается столько дочерних элементов flexbox, сколько это разумно. Любое переполнение перемещается на следующую строку. 9Объявление 0050 flex: 200px , установленное для статей, означает, что каждая из них будет иметь ширину не менее 200 пикселей. Позже мы обсудим это свойство более подробно. Вы также можете заметить, что последние несколько дочерних элементов в последней строке стали шире, так что вся строка по-прежнему заполнена.

Но здесь мы можем сделать еще кое-что. Прежде всего, попробуйте изменить значение свойства flex-direction на row-reverse . Теперь вы увидите, что у вас все еще есть макет из нескольких строк, но он начинается с противоположного угла окна браузера и движется в обратном направлении.

Здесь стоит отметить, что для flex-direction и flex-wrap существует сокращение: flex-flow . Так, например, можно заменить

 flex-direction: row;
flex-wrap: обернуть;

 flex-flow: обтекание рядов;

Давайте теперь вернемся к нашему первому примеру и посмотрим, как мы можем контролировать, какую долю пространства занимают гибкие элементы по сравнению с другими гибкими элементами. Запустите локальную копию flexbox0.html или возьмите копию flexbox1.html в качестве новой отправной точки (посмотрите ее вживую).

Сначала добавьте следующее правило в конец вашего CSS:

 article {
  гибкий: 1;
}

Это безразмерное значение пропорции, определяющее, сколько доступного пространства вдоль главной оси будет занимать каждый гибкий элемент по сравнению с другими гибкими элементами. В этом случае мы присваиваем каждому элементу

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

Теперь добавьте следующее правило под предыдущим:

 article:nth-of-type(3) {
  гибкий: 2;
}

Теперь, когда вы обновитесь, вы увидите, что третий

занимает в два раза больше доступной ширины, чем два других.

Всего теперь доступно четыре единицы пропорции (поскольку 1 + 1 + 2 = 4). Первые два гибких элемента имеют по одной единице, поэтому каждый из них занимает 1/4 доступного пространства. В третьем две единицы, поэтому он занимает 2/4 доступного места (или половину).

Вы также можете указать значение минимального размера в значении гибкости. Попробуйте обновить существующие правила для статей следующим образом:

 article {
  гибкий: 1 200 пикселей;
}
статья:nth-of-type(3) {
  гибкий: 2 200 пикселей;
}

Это в основном гласит: «Каждому гибкому элементу сначала будет предоставлено 200 пикселей доступного пространства. После этого оставшееся доступное пространство будет разделено в соответствии с пропорциями». Попробуйте обновить, и вы увидите разницу в том, как распределяется пространство.

Настоящую ценность flexbox можно увидеть в его гибкости/отзывчивости. Если вы измените размер окна браузера или добавите еще один элемент

, макет продолжит работать нормально.

flex — это сокращенное свойство, которое может указывать до трех различных значений:

Безразмерное значение пропорции, которое мы обсуждали выше. Это можно указать отдельно, используя длинное свойство flex-grow .
Значение второй безразмерной пропорции, flex-shrink , который вступает в игру, когда flex-элементы переполняют свой контейнер. Это значение указывает, насколько элемент будет сжиматься, чтобы предотвратить переполнение. Это довольно продвинутая функция flexbox, и мы не будем подробно о ней рассказывать в этой статье.
Минимальное значение размера, о котором мы говорили выше. Это можно указать отдельно, используя полное значение flex-basis .

Мы бы не советовали использовать гибкие свойства, если в этом нет особой необходимости (например, чтобы переопределить что-то ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут несколько сбивать с толку.

Вы также можете использовать функции flexbox для выравнивания flex-элементов вдоль главной или поперечной оси. Давайте рассмотрим это на новом примере: flex-align0.html (см. также его вживую). Мы собираемся превратить это в аккуратную, гибкую кнопку/панель инструментов. На данный момент вы увидите горизонтальную строку меню с несколькими кнопками, зажатыми в верхнем левом углу.

Сначала сделайте локальную копию этого примера.

Теперь добавьте следующее в конец примера CSS:

 div {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: пространство вокруг;
}

Обновите страницу, и вы увидите, что кнопки теперь правильно центрированы по горизонтали и вертикали. Мы сделали это с помощью двух новых свойств.

align-items управляет расположением flex-элементов на поперечной оси.

По умолчанию значение равно stretch , которое растягивает все гибкие элементы, чтобы заполнить родителя в направлении поперечной оси. Если у родителя нет фиксированной высоты в направлении поперечной оси, тогда все гибкие элементы станут такими же высокими, как самый высокий гибкий элемент. Вот как в нашем первом примере столбцы были одинаковой высоты по умолчанию.
Значение center , которое мы использовали в приведенном выше коде, заставляет элементы сохранять свои внутренние размеры, но центрироваться по поперечной оси. Вот почему кнопки нашего текущего примера центрированы по вертикали.
У вас также могут быть такие значения, как flex-start и flex-end , которые будут выравнивать все элементы по началу и концу поперечной оси соответственно. См. align-items для получения полной информации.

Вы можете переопределить align-items поведение для отдельных flex-элементов путем применения к ним свойства align-self . Например, попробуйте добавить в CSS следующее:

 button:first-child {
  выравнивание: flex-end;
}

Посмотрите, какой эффект это имеет, и удалите его снова, когда закончите.

justify-content управляет расположением гибких элементов на главной оси.

Значение по умолчанию — flex-start , что размещает все элементы в начале главной оси.
Вы можете использовать flex-end , чтобы разместить их на конце.
center также является значением для justify-content . Это заставит гибкие элементы располагаться в центре главной оси.
Значение, которое мы использовали выше, space-around , полезно — оно распределяет все элементы равномерно вдоль главной оси с небольшим пространством, оставленным с обоих концов.
Существует еще одно значение, с пробелом между , которое очень похоже на 9.0050 пробел-около , за исключением того, что он не оставляет пробелов ни с одного конца.

Свойство justify-items игнорируется в макетах flexbox.

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

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

Код для этого прост. Попробуйте добавить следующий код CSS в пример кода панели кнопок:

 кнопка: первый дочерний элемент {
  порядок: 1;
}

Обновите и вы увидите, что кнопка «Улыбка» переместилась в конец основной оси. Давайте поговорим о том, как это работает, немного подробнее:

По умолчанию все flex-элементы имеют значение order , равное 0.
Элементы Flex с более высокими указанными значениями порядка будут отображаться позже в порядке отображения, чем элементы с более низкими значениями порядка.
элемента Flex с одинаковым значением порядка появятся в их исходном порядке. Таким образом, если у вас есть четыре элемента, значения порядка которых были установлены как 2, 1, 1 и 0 соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
3-й элемент появляется после 2-го, потому что он имеет такое же значение порядка и находится после него в исходном порядке.

Вы можете установить отрицательные значения порядка, чтобы элементы отображались раньше, чем элементы, значение которых равно 0. Например, вы можете сделать так, чтобы кнопка «Blush» отображалась в начале главной оси, используя следующее правило:

 button:last- ребенок {
  порядок: -1;
}

С помощью flexbox можно создавать довольно сложные макеты. Совершенно нормально установить гибкий элемент в качестве гибкого контейнера, чтобы его дочерние элементы также располагались как гибкие блоки. Взгляните на complex-flexbox.html (также смотрите его вживую).

HTML для этого довольно прост. У нас есть элемент

, содержащий три

s. Третий

содержит три

s, а первый

содержит пять