Flexbox
=======

* Назад
* Обзор: CSS layout
* Далее

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

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

Почему Flexbox?
---------------

Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.

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

* Вертикального выравнивания блока внутри родителя.
* Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
* Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.

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

Разберём простой пример
-----------------------

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

Вы увидите элемент `<header>` с заголовком верхнего уровня внутри, и элемент `<section>` содержащий три элемента `<article>`. Мы будем использовать их для создания стандартного трёхколоночного макета.

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

Определяем, какие элементы разместить в виде flex блоков
--------------------------------------------------------

Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение `display` в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы `<article>`, поэтому мы устанавливаем это значение на `<section>` (который становится flex контейнером):


```css
section {
  display: flex;
}
```


В результате у нас получится вот так:

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example2.png)

Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.

**Примечание**: вы также можете установить значение `display` `inline-flex`, если хотите расставить inline элементы как flex блоки.

Внутри flex модели
------------------

Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:

![flex_terms.png](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)

* **Главная ось (main axis)** проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются **main start** и **main end**.
* **Поперечная ось (cross axis)** проходит перпендикулярно Flex элементам. Начало и конец этой оси называются **cross start** and **cross end**.
* Родительский элемент, на который назначено свойство `display: flex` (`<section>` в нашем примере) называется **flex container**.
* Элементы, размещённые в нём как Flex блоки называются **flex items** (в нашем примере это `<article>` ).

Запомните эти термины, они пригодятся вам в последующих разделах.

Столбцы или строки?
-------------------

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

Попробуйте добавить следующую строчку в ваш файл:


```css
flex-direction: column;
```


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

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

Перенос строк
-------------

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

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example3.png)

Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить — добавить следующее свойство в CSS-правило для `<section>`:


```css
flex-wrap: wrap;
```


Также добавьте следующее свойство в CSS-правило для `<arcticle>`:


```css
flex: 200px;
```


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

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example4.png)

Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство `flex: 200px`, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.

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

flex-flow сокращение
--------------------

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


```css
flex-direction: row;
flex-wrap: wrap;
```


на


```css
flex-flow: row wrap;
```

Гибкое изменение размеров flex элементов
----------------------------------------

Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).

Прежде всего, добавим следующее правило в конец вашего CSS кода:


```css
article {
  flex: 1;
}
```


Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу `<article>` значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.

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


```css
article:nth-of-type(3) {
  flex: 2;
}
```


Обновив страницу, вы увидите, что третий элемент `<article>` занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).

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


```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
```


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

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент `<article>`, макет будет и дальше выглядеть также хорошо.

flex: краткий код против развёрнутого
-------------------------------------

`flex` это сокращённое свойство, в которым можно задать до трёх разных свойств:

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

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

Горизонтальное и вертикальное выравнивание
------------------------------------------

Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example5.png)

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

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


```css
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
```


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

`align-items` контролирует, где на поперечной оси находятся flex элементы.

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

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


```css
button:first-child {
  align-self: flex-end;
}
```


Посмотрите, что произошло и удалите эти строки.

`justify-content` контролирует, где flex элементы располагаются на главной оси.

* По умолчанию стоит значение `flex-start`, которое располагает все элементы в начале главной оси.
* Также можно использовать `flex-end`, чтобы расположить их в конце.
* `center` - также одно из значений `justify-content`, располагает все элементы по центру главной оси.
* Значение, которое мы использовали выше, `space-around`, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
* И ещё одно значение, `space-between`, которое очень похоже на `space-around,` за исключением того, что оно не оставляет места на обоих концах.

Попробуйте немного поиграть с этими значениями прежде чем продолжить

Порядок элементов flex
----------------------

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

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


```css
button:first-child {
  order: 1;
}
```


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

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

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


```css
button:last-child {
  order: -1;
}
```

Вложенные flex блоки
--------------------

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

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example7.png)

HTML для этого довольно простой. У нас есть элемент `<section>`, содержащий три `<article>`. Третий `<article>` содержит ещё три `<div>`.
```

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button
```


Давайте посмотрим на код, который мы использовали для макета.

Прежде всего, мы устанавливаем дочерние элементы `<section>` в виде flex блоков.


```css
section {
  display: flex;
}
```


Затем мы устанавливаем несколько значений на самих `<article>`. Обратите внимание на второе правило: мы устанавливаем третий `<article>`, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.


```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
```


Затем мы берём первый `<div>`. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы `<button>`) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.


```css
article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
```


Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.


```css
button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}
```

Подытожим
---------

Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.

* Назад
* Обзор: CSS layout
* Далее