Выравнивание блоков с помощью css с использованием flex контейнера. Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки Что такое флексы css

Содержание:

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

UPD от 02.02.2017: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet .

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

Согласно сайту caniuse.com , Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

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

Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали - вдоль main axis - главной оси.

Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

Приготовим полигон для экспериментов:

Один родительский блок (желтый) и 5 дочерних.

Display: flex

И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

display: flex; делает все дочерние элементы резиновыми - flex , а не инлайновыми или блочными, как было изначально.

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

Свойство display для Flexbox может принимать два значения:

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

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

Flex-direction

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

Возможные значения:

row - строка (значение по умолчанию); row-reverse - строка с элементами в обратном порядке; column - колонка; column-reverse - колонка с элементами в обратном порядке.

row и row-reverse

column и column-reverse

Flex-wrap

В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

Возможные значения:

nowrap - блоки не переносятся (значение по умолчанию); wrap - блоки переносятся; wrap-reverse - блоки переносятся и располагаются в обратном порядке.

Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

Возможные значения: можно задавать оба свойства или только какое-то одно. Например:

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse:

Order

Для управления порядком блоков служит свойство order .

Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1:

Justify-content

Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

justify-content и align-items применяются к родительскому контейнеру, align-self - к дочерним.

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

Возможные значения justify-content:

flex-start - элементы выравниваются от начала главной оси (значение по умолчанию); flex-end - элементы выравниваются от конца главной оси; center - элементы выравниваются по центру главной оси; space-between - элементы выравниваются по главной оси, распределяя свободное место между собой; space-around - элементы выравниваются по главной оси, распределяя свободное место вокруг себя.

flex-start и flex-end

space-between , space-around

Align-items

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

Возможные значения align-items:

flex-start - элементы выравниваются от начала перпендикулярной оси; flex-end - элементы выравниваются от конца перпендикулярной оси; center - элементы выравниваются по центру; baseline - элементы выравниваются по базовой линии; stretch - элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).

flex-start , flex-end

baseline , stretch

Align-self

align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.

Возможные значения align-self:

auto - значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start - элемент выравнивается от начала перпендикулярной оси; flex-end - элемент выравнивается от конца перпендикулярной оси; center - элемент выравнивается по центру; baseline - элемент выравнивается по базовой линии; stretch - элемент растягивается, занимая все пространство по высоте.

Align-content

Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

Возможные значения:

flex-start - элементы выравниваются от начала главной оси; flex-end - элементы выравниваются от конца главной оси; center - элементы выравниваются по центру главной оси; space-between - элементы выравниваются по главной оси, распределяя свободное место между собой; space-around - элементы выравниваются по главной оси, распределяя свободное место вокруг себя; stretch - элементы растягиваются, заполняя всю высоту (значение по умолчанию).

flex-start , flex-end

center , stretch

space-between , space-around

Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

Элементы стоят столбиком, но не переносятся:

Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

Думаю, со временем заработает.

UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо

Свойство 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.

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

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

Свойства flex-контейнера
flex-direction	Определяет направление главной оси. Возможные значения: row – слева направо (по умолчанию); row-reverse – справа налево; column – сверху вниз; column-reverse – снизу вверх.
flex-wrap	Определяет многострочность контейнера. Возможные значения: nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию); wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну; wrap-reverse – похоже на wrap , но перенос происходит снизу вверх.
flex-flow	Определяет сразу два параметра: flex-direction и flex-wrap. Например, flex-flow: column wrap;
justify-content	Определяет выравнивание элементов по главной оси. Возможные значения: flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию); flex-end – flex-элементы прижимаются к концу главной оси; center – flex-элементы выравниваются по центру главной оси; space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний - к концу; space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.
align-items	Определяет выравнивание элементов по поперечной оси. Возможные значения: flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию); flex-end – flex-элементы прижимаются к концу поперечной оси; center – flex-элементы выравниваются по центру поперечной оси; baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»; stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.
align-content	Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения: flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию); flex-end – строки flex-элементов прижимаются к концу поперечной оси; center – fстроки flex-элементов выравниваются по центру поперечной оси; space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя - к концу; space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками. stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован. Это свойство не работает для однострочного flex-контейнера.

Свойства flex-элементов
order	Определяет порядок следования отдельно взятого flex-элемента внутри flex-контейнера. Задается целым числом. По умолчанию равно 0, тогда элементы следуют друг за другом в порядке естественного потока. Значение order задает вес позиции элемента в последовательности, а не абсолютную позицию.
flex-basis	Определяет базовый размер flex-элемента перед распределением пространства в контейнере. Может быть задан в px, %, em и остальных единицах измерения. По сути это своего рода отправная точка, относительно которой происходит растягивание или сжатие элемента. Значение по умолчанию – auto , при этом размер элемента зависит от размера внутреннего контента.
flex-grow	Определяет, какую долю свободного места внутри контейнера добавит к своему базовому размеру flex-элемент. Задается целым числом, служащим пропорцией. По умолчанию равно 0. Если у всех элементов flex-grow: 1 , то все они будут одинакового размера. Если одному flex-элементу задать значение 2, то к его базовому размеру добавится в два раза больше, чем к другим.
flex-shrink	Определяет, на сколько в случае недостатка места будет уменьшаться flex-элемент относительно уменьшения соседних элементов внутри flex-контейнера. Задается целым числом, служащим пропорцией. По умолчанию равно 1. Если одному flex-элементу задать значение flex-shrink: 2 , то из его базового размера вычтется в два раза больше, чем из других, если контейнер меньше, чем сумма базовых размеров входящих в него элементов.
flex	Определяет сразу три параметра: flex-grow, flex-shrink, flex-basis. Например, flex: 1 1 200px;
align-self	Переопределяет выравнивание, заданное по умолчанию или в align-items , для конкретного flex-элемента. Возможные значения: flex-start – flex-элемент прижимается к началу поперечной оси (по умолчанию); flex-end – flex-элемент прижимается к концу поперечной оси; center – flex-элемент выравнивается по центру поперечной оси; baseline – flex-элемент выравнивается по базовой линии; stretch – flex-элементы растягивается, занимая все доступное место по поперечной оси. Но если задана высота, то stretch будет проигнорирован.

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

flex-direction: column;

You"ll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.

Note : You can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. Experiment with these values too!

Wrapping

One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example):

Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your element represents a standalone section - which doesn" t have a more specific semantic element to represent it contained within an html document.>

rule:

Flex-wrap: wrap; flex: 200px;

Try this now; you"ll see that the layout looks much better with this included:

We now have multiple rows - as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The flex: 200px declaration set on the articles means that each will be at least 200px wide; we"ll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.

But there"s more we can do here. First of all, try changing your flex-direction property value to row-reverse - now you"ll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.

flex-flow shorthand

At this point it is worth noting that a shorthand exists for flex-direction and flex-wrap - flex-flow . So for example, you can replace

Flex-direction: row; flex-wrap: wrap;

Flex-flow: row wrap;

Flexible sizing of flex items

Let"s now return to our first example, and look at how we can control what proportion of space flex items take up. Fire up your local copy of flexbox0.html , or take a copy of flexbox1.html as a new starting point (see it live).

First, add the following rule to the bottom of your CSS:

Article { flex: 1; }

This is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up. In this case, we are giving each element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.

Now add the following rule below the previous one:

Article:nth-of-type(3) { flex: 2; }

Section - article article article - div - button div button div button button button

Let"s look at the code we"ve used for the layout.

Summary

That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we"ll have a look at another important aspect of CSS layouts - CSS Grids.

Статьи по теме