10.02.2017

Как работает Флексбокс — объясняем в больших цветных гифках

Без-имени-1

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

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

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

Свойство №1 — Display: Flex

Пример веб-страницы:

1

Четыре цветных блока с разными размерами внутри серого контейнера. Див по умолчанию отображается со свойством display: block. Каждый блок таким образом занимает всю строку. Чтобы начать работать с Flexbox, контейнеру нужно задать свойство display: flex.

#container {display: flex;}

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

Свойство №2 — Flex Direction

У контейнера с Flexbox есть две оси: основная ось(X) и перекрестная ось(Y), которые обычно выглядят так:

3

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

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

5

По этому поводу есть важное замечание — flex-direction: column; не будет строить блоки на Y-оси вместо X-оси. Это свойство переворачивает X-оси из горизонтального положения в вертикальное.

Есть пара других значений для flex-direction, например: row-reverse and column-reverse.

6

Свойство №3 — Justify Content

Justify-content устанавливает то, как происходит выравнивание элементов на X-оси.

Тут нас ждет более глубокое понимание различий между осями X и Y. Для начала давайте установим значение свойства flex-direction: row.

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

Чтобы использовать возможности свойства justify-content, существует пять значений:

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around

7

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

Space-around устанавливает одинаковые отступы по обе стороны внутри контейнера. Это значит, что отступы между цветными блоками строятся с учетом отступов по краям контейнера.

Примечание: помните, что justify-content работает вдоль основной оси(X), а flex-direction переключает основную ось(X) на перекрестную(Y).

Свойство №4 — Align Items

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

3

Justify-content работает на X-оси align-items и обращается к оси-Y. Сбросим значение свойства flex-direction: row, так оси примут вид как на рисунке выше.

Затем, углубимся в значения для свойства align-item:

  • Flex-start
  • Flex-end
  • Center
  • Stretch
  • Baseline

Первые три значения точно такие же, как и у justify-content, так что здесь нет ничего особо интересного. Однако следующие два немного отличаются.

Если свойство align-item принимает значение stretch, то элементы растягиваются по высоте контейнера. А в значении baseline они выравниваются относительно базовой линии друг друга.

8

(Помните, что при использовании align-items: stretch блокам следует установить автоматическую высоту(height: auto). Иначе значение height будет предопределять растяжение блоков.)

Чтобы представить главную(X) и перекрестную(Y) ось лучше, попробуйте скомбинировать два свойства justify-content и align-items и посмотреть, как по-разному работают значения flex-direction.

9

С помощью row блоки встают вдоль главной(X) оси. А с column они идут по вертикальной(Y) оси.

10

Свойство №5 — Align Self

Align-self позволяет вам вручную управлять выравниванием блока.

Свойство аннулирует align-items для одного из блоков. У этого свойства все значения такие же, как и для align-items, но они находятся в состоянии auto по умолчанию, что заставляет их наследовать значения свойства align-items. Будьте внимательны.
#container {
align-items: flex-start;
}
// Only this square will be centered.
.square#one {
align-self: center;
}

11

Это выглядит так. Вы применяете align-self к двум блокам, к оставшимся align-items: center и flex-direction: row.

Заключение

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

Перевод статьи: How Flexbox works — explained with big, colorful, animated gifs (Scott Domes)