Frontendly
Статьи по frontend/web разработке.

Как работает Flexbox — объясняем с большими, красочными, анимированными гифками.

Эта статья является адаптированным переводом статьи “How Flexbox works — explained with big, colorful, animated gifs”.

Как работает Flexbox — объясняем с большими, красочными, анимированными гифками.

Flexbox обещает спасти нас от зла ​​простого CSS (например, вертикального выравнивания).

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

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

Основной принцип Flexbox — сделать макеты гибкими и интуитивно понятными.

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

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

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

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

Вот наш пример веб-страницы:

У вас есть четыре цветных элемента разных размеров, содержащихся в сером элементе контейнера. На данный момент каждый div имеет значение по умолчанию display: block. Таким образом, каждый квадрат занимает всю ширину своей линии (подробнее об этом, вы можете прочитать в этой статье).

Чтобы начать работу с Flexbox, вам нужно превратить ваш контейнерв гибкий контейнер . Это так же просто, как:

#container {
   display: flex;
 }

Немногое изменилось — ваши div теперь отображаются как inline. Но за кулисами вы сделали что-то мощное. Вы дали своим квадратам нечто, называемое гибким контекстом .

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

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

Контейнер Flexbox имеет две оси: главную(main axis) и поперечную оси(cross axis), которые по умолчанию выглядят так:

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

Впрочем, давайте повернем основную ось, с помощью flex-direction

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

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

Есть также несколько других опций для направления гибкого направления: row-reverse и column-reverse.

Свойство № 3: Justify-content

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

Здесь вы погрузитесь немного глубже в различие главной / поперечной оси. Сначала вернемся к flex-direction: row.

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

В вашем распоряжении пять команд для использования justify-content :

  1. Flex-start
  2. Flex-end
  3. Center
  4. Space-between
  5. Space-around

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

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

Последнее замечание: помните, что justify-content работает вдоль главной оси , а flex-direction переключает основную ось . Это будет важно, когда вы перейдете к…

Свойство № 4: Align-items

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

Давайте сбросим flex-direction на row, чтобы наши оси выглядели так же, как на картинке выше.

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

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

Первые три точно такие же, как и в justify-content, поэтому здесь нет ничего особенного.

Однако, следующие два немного отличаются.

Благодаря stretch, элементы занимают всю поперечную ось, а baseline, выравнивает элементы по абзацам внутри элементов.

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

Для baseline, имейте в виду, что если вы уберете теги абзаца, то элементы будут выровнены по нижней границе элементов, вот так:

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

Со строкой квадраты расположены вдоль горизонтальной главной оси. С колонки они падают вдоль вертикальной главной оси.

Даже если квадраты центрированы как по вертикали, так и по горизонтали в обоих случаях, они не взаимозаменяемы!

Свойство № 5: Align-self

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

Проще говоря, происходит переопределение align-items для одного квадрата.

#container {
  align-items: flex-start;
}

.square#one {
  align-self: center;
}// Только этот квадрат будет отцентрирован

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

Заключение

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

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

Вы также можете посетить наш канал в Telegram.