Метод позиционирования элементов Flexbox. Выравнивание блоков с помощью css с использованием flex контейнера Практическое применение flexbox

One of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time. It enabled proper vertical alignment, so we can at last easily center a box. In this guide, we will take a thorough look at how the alignment and justification properties work in Flexbox.

To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case the inline axis running horizontally.

You can take a look at the code of this example below. Change the size of the container or nested element and the nested element always remains centered.

Properties that control alignment

The properties we will look at in this guide are as follows.

justify-content - controls alignment of all items on the main axis.
align-items - controls alignment of all items on the cross axis.
align-self - controls alignment of an individual flex item on the cross axis.
align-content - described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.

We will also discover how auto margins can be used for alignment in flexbox.

Note : The alignment properties in Flexbox have been placed into their own specification - CSS Box Alignment Level 3 . It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.

The Cross Axis

The align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column .

We are making use of cross-axis alignment in the most simple flex example. If we add display: flex to a container, the child items all become flex items arranged in a row. They will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. If your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item.

The reason the items become the same height is that the initial value of align-items , the property that controls alignment on the cross axis, is set to stretch .

We can use other values to control how the items align:

align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

In the live example below, the value of align-items is stretch . Try the other values and see how all of the items align against each other in the flex container.

Aligning one item with align-self

The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto , which will reset the value to that which is defined on the flex container.

In this next live example, the flex container has align-items: flex-start , which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-self: stretch ; another item has been selected using its class of selected and given align-self: center . You can change the value of align-items or change the values of align-self on the individual items to see how this works.

Changing the main axis

So far we have looked at the behaviour when our flex-direction is row , and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

If we change our flex-direction to column, align-items and align-self will align the items to the left and right.

You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.

Aligning content on the cross axis - the align-content property

So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines .

For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

The align-content property takes the following values:

align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly (not defined in the Flexbox specification)

In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between , which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.

Try out the other values to see how the align-content property works.

Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.

Note : the value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

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

Какие возможности дает данная сетка:

возможность управлять колончатой структурой основного каркаса html-вёрстки;
управлять ориентацией расположения html-тэгов подобно табличной верстке;
управлять порядком расположения;
и многие другие.

Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:

Навигация

Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:

ИЕ: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Хром: 29.0, 21.0 -webkit-
Сафари: 6.1 -webkit-
Опера: 12.1 -webkit-
Сафари (под Мак): 7.0 -webkit-
Опера-Мини: 8
Анройд-Браузер: 4.4, 4.1 -webkit-
Хром (под Андройд): 44

1.1. Свойство display: flex

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

display: flex; — для блокового отображения;
display: inline-flex; — для инлайнового отображения.

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

1.2. Выравниваем горизонтально justify-content

Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.

justify-content
Значения:
flex-start	Выравнивает по левой кромке. Дефолтное значение
flex-end	Выравнивает по правой кромке.
center	Выравнивает по середине.
space-between	По всей ширине родителя на равновеличинные отрезки. Стоит отметить, что первый элемент приживается к левому краю без пустот, но с учетом паддингов, а последний также, но к правому краю. Все остальные блочные элементы размещаются между первым и последним через одинаковые отрезки пустоты.
space-around	По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина.
initial	Задание дефолтного значения.
inherit

Формат записи

B-podlogka { height: 120px; background-color: #ddd; margin: 0px; padding: 10px; display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start; }

B-podlogka { justify-content: flex-end; }

B-podlogka { justify-content: center; }

B-podlogka { justify-content: space-between; }

B-podlogka { justify-content: space-around; }

1.3. Вертикальное выравнивание align-items

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

align-items
Значения:
stretch	Флексбокс-блоки, если не зафиксирована высота, вытягиваются на всю высоту родительского контейнера. Является первоначальным (базовым) параметром.
flex-start	Предназначено для выравнивания флексбокс-итемов по верхней кромке контейнера-родителя с учетом внутренних отступов (padding).
flex-end	Предназначено для выравнивания флексбокс-итемов по нижней кромке контейнера-родителя с учетом внутренних отступов (padding).
center	Выравнивает дочерние флекс-блоки внутри флекс-контейнера по средней линии самого высокого блока.
baseline	Выравнивает дочерние флекс-блоки внутри родительского относительно средней линии текста в этих блоках.
initial
inherit	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

B-podlogka { align-items: stretch; -webkit-align-items: stretch; }

Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto; .

B-podlogka { align-items: flex-start; }

B-podlogka { align-items: flex-end; }

B-podlogka { align-items: center; }

B-podlogka { align-items: baseline; }

1.4. Ориентация основной оси flex-direction

Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту?) и по горизонтали (в строку, по дефолту?).

Формат записи

B-podlogka { flex-direction: row; -webkit-flex-direction: row; }

B-podlogka { flex-direction: row-reverse; }

B-podlogka { flex-direction: column; }

B-podlogka { flex-direction: column-reverse; }

1.5. Размещение в несколько строк flex-wrap

Отвечает за размещение дочерних flex-блоков в одну или несколько строк.

flex-wrap
Значения:
nowrap	В исходном состоянии все дочерние итемы располагаются в одну строчку (? или? в зависимости от выбранной ориентации текста).
wrap	При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя (? или? в зависимости от выбранной ориентации текста).
wrap-reverse	При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя, имея при этом реверсивный порядок чередования.
initial	Будет установлено в первоначальное значение.
inherit	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

B-podlogka { flex-wrap: wrap; -webkit-flex-wrap: wrap; }

B-podlogka { flex-wrap: wrap-reverse; }

1.6. Направленность и многострочность одним правилом flex-flow

Данное правило используется, как более компактная запись двух предыдущих правил с целью оптимизации кода.

Формат записи

B-podlogka { flex-flow: row wrap; -webkit-flex-flow: row wrap; }

1.7. Выравниваем вертикально во всех строках align-content

Это цсс-правило используется для того, чтобы выровнять вертикально внутриконтейнейрные дочерние флекс-блоки. Для срабатывания этого правила необходимо, чтобы были у родительского контейнера заданы: height и flex-flow. Является не наследуемым.

align-content
Значения:
stretch	Растягивание элементов на всю высоту родительского контейнера (у флекс-блоков не должна быть зафиксирована высота).
flex-start	Выравнивает поверху.
flex-end	Выравнивает понизу.
center	Выравнивает вертикально по центру.
space-between	Вертикально выравнивает внутриконтейнерные элементы таким образом, что первая линия блоков прижимается кверху, последняя — книзу, а пространство между остальными распределяется равномерно.
space-around	Вертикально выравнивает внутриконтейнерные элементы таким образом, что расстояние в начале, в конце и между ними равны между собой.
initial	Будет установлено в первоначальное значение.
inherit	Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Пример кода

B-podlogka { height: 120px; flex-flow: row wrap; align-content: stretch; }

B-podlogka { align-content: flex-start; }

B-podlogka { align-content: flex-end; }

B-podlogka { align-content: center; }

B-podlogka { align-content: space-between; }

B-podlogka { align-content: space-around; }

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

2.1. Упорядочивание блоков order

ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.

Формат записи

B-div1 { -webkit-order: 1; order: 1; }

B-div5 { -webkit-order: -1; order: -1; }

2.2. Базис флекс-блока flex-basis

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

Пример кода

B-div3 { flex-basis: 70px; -webkit-flex-basis: 70px; }

Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.

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

Применяется к : flex контейнеру.

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

Flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to : flex containers.

Initial : stretch.

Flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.

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

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

Display: Flex

Вот пример страницы:

У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

#container { display: flex; }

Вроде бы ничего особо и не изменилось - div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

Flex Direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

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

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

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

Есть еще парочка свойств для flex-direction: row-reverse и column-reverse .

Justify Content

Justify-content отвечает за выравнивание элементов по главной оси.

Вернемся к flex-direction: row .

#container { display: flex; flex-direction: row; justify-content: flex-start; }

Justify-content может принимать 5 значений:

flex-start ;
flex-end ;
center ;
space-between ;
space-around .

Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.

Align Items

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.

Вернемся обратно к flex-direction: row и пройдемся по командам align-items:

flex-start ;
flex-end ;
center ;
stretch ;
baseline .

Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:

Чтобы получше разобраться в том, как работают оси, давайте объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction:

Align Self

Align-self позволяет выравнивать элементы по отдельности.

#container { align-items: flex-start; } .square#one { align-self: center; } // Only this square will be centered.

Давайте для двух квадратов применим align-self , а для остальных применим align-items: center и flex-direction: row .

Flex-Basis

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

Flex-basis влияет на размер элементов вдоль главной оси.

Давайте посмотрим, что случится, если мы изменим направление главной оси:

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

Flex Grow

Это свойство немного сложнее.

Для начала давайте зададим нашим квадратикам одинаковую ширину в 120px:

По умолчанию значение flex-grow равно 0. Это значит, что квадратам запрещено расти (занимать оставшееся место в контейнере).

Попробуем задать flex-grow равным 1 для каждого квадрата:

Квадраты заняли оставшееся место в контейнере. Значение flex-grow аннулирует значение ширины.

Но здесь возникает один вопрос: что значит flex-grow: 1 ?

Попробуем задать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные.

Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим квадратам:

Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства в контейнере.

Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).

Теперь третий квадрат занимает 2/7 пространства, остальные - по 1/7.

Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).

Flex Shrink

Flex-shrink - прямая противоположность flex-grow . Оно определяет, насколько квадрату можно уменьшиться в размере.

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

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

Зададим flex-grow и flex-shrink равными 1:

Теперь давайте поменяем значение flex-shrink для третьего квадрата на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

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

Flex

Flex заменяет flex-grow , flex-shrink и flex-basis .

Значения по умолчанию: 0 (grow) 1 (shrink) и auto (basis) .

Создадим два квадрата:

Square#one { flex: 2 1 300px; } .square#two { flex: 1 2 300px; }

У обоих квадратов одинаковый flex-basis . Это значит, что они оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding).

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

Как вещи растут и сжимаются

Когда увеличивается первый квадрат, он не становится в два раза больше второго квадрата, и когда уменьшается второй квадрат, он не становится в два раза меньше первого. Это происходит из-за того, что flex-grow и flex-shrink отвечают за темп роста и сокращения.

Немного математики

Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding, и у нас останется 600px, как раз для двух квадратов.

Когда ширина контейнера становится равной 430px (потеря в 210px), первый квадрат (flex-shrink: 1) теряет 70px. Второй квадрат (flex-shrink: 2) теряет 140px.

Когда контейнер сжимается до 340px, мы теряем 300px. Первый квадрат теряет 100px, второй - 200px.

Тоже самое происходит и с flex-grow .

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items) . Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:

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

Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.

Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton .

Что такое flexbox

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

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Основные понятия

Рис. 1. Модель flexbox

Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

Основной размер (main size ) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

Рис. 2. Режим строки и колонки

2. Flex-контейнер

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float , clear , vertical-align . Также, на flex-контейнер не оказывают влияние свойства column-* , создающие колонки в тексте и псевдоэлементы::first-line и::first-letter .

Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:

Flex-container { /*генерирует flex-контейнер уровня блока*/ display: -webkit-flex; display: flex; } .flex-container { /*генерирует flex-контейнер уровня строки*/ display: -webkit-inline-flex; display: inline-flex; }

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

Рис. 3. Выравнивание элементов в модели flexbox

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

3. Flex-элементы

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

Для flex-элементов блокируется их значение свойства display . Значение display: inline-block; и display: table-cell; вычисляется в display: block; .
Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
Поля margin соседних flex-элементов не схлопываются.
Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto; . Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

4. Порядок отображения flex-элементов и ориентация

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

4.1. Направление главной оси: flex-direction

Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.

flex-direction
Значения:
row	Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн-оси (inline-axis).
row-reverse	Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
column	Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse	Колонка с элементами в обратном порядке, снизу вверх.
initial
inherit

Рис. 4. Свойство flex-direction для left-to-right языков

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; }

4.2. Управление многострочностью flex-контейнера: flex-wrap

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

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

Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; }

4.3. Краткая запись направления и многострочности: flex-flow

Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap . Значение по умолчанию flex-flow: row nowrap; . свойство не наследуется.

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; }

4.4. Порядок отображения flex-элементов: order

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

Первоначально все flex-элементы имеют order: 0; . При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order , они будут отображаться в соответствии с исходным порядком.

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-order: 1; order: 1; }
Рис. 6. Порядок отображения flex-элементов

5. Гибкость flex-элементов

Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex . Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink), чтобы предотвратить переполнение.

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

5.1. Задание гибких размеров одним свойством: flex

Свойство является сокращённой записью свойств flex-grow , flex-shrink и flex-basis . Значение по умолчанию: flex: 0 1 auto; . Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; }

5.2. Коэффициент роста: flex-grow

Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.

Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-grow: 3; flex-grow: 3; }

5.3. Коэффициент сжатия: flex-shrink

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

Рис. 8. Сужение flex-элементов в строке

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-shrink: 3; flex-shrink: 3; }

5.4. Базовый размер: flex-basis

Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content , базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого. Не наследуется.

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-basis: 100px; flex-basis: 100px; }

6. Выравнивание

6.1. Выравнивание по главной оси: justify-content

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow . Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto; , свойство не будет оказывать влияния. Свойство не наследуется.


Значения:
flex-start	Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера.
flex-end	Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.
space-between	Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру flex-start .
space-around	Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис

Flex-container { display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; }

6.2. Выравнивание по поперечной оси: align-items и align-self

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

6.2.1. Align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.


Значения:
flex-start
flex-end
center
baseline	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
stretch
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 10. Выравнивание элементов в контейнере по вертикали

Синтаксис

Flex-container { display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; }

6.2.2. Align-self

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


Значения:
auto	Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера.
flex-start	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси.
flex-end	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси.
center	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
baseline	Flex-элемент выравнивается по базовой линии.
stretch	Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto , элемент растягивается. Значение по умолчанию.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 11. Выравнивание отдельных flex-элементов

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-align-self: center; align-self: center; }

6.3. Выравнивание строк flex-контейнера: align-content

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


Значения:
flex-start	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
flex-end	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
center	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
space-between	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично flex-start . В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
space-around	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент center . В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
stretch	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично flex-start . В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 12. Многострочное выравнивание flex-элементов

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; height: 100px; }