Как работает Flexbox — объясняем с большими, красочными, анимированными гифками.
Эта статья является адаптированным переводом статьи “How Flexbox works — explained with big, colorful, animated gifs”.
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 :
- Flex-start
- Flex-end
- Center
- Space-between
- 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.
- flex-start
- flex-end
- center
- stretch
- 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.
