FlexBox визуализация через GIF
Давайте посмотрим, как работает Flexbox, чтобы мы могли использовать его для создания лучших макетов. Основной принцип Flexbox — сделать макеты гибкими и интуитивно понятными. Для этого контейнеры сами решают, как равномерно распределить их дочерние элементы, включая их размер и расстояние между ними.
В этой главе мы рассмотрим 5 самых распространенных свойств Flexbox. Мы рассмотрим, что они делают, как вы можете их использовать и как будут выглядеть их результаты.
Свойство № 1: Display: Flex
У вас есть четыре цветных элемента разных размеров, содержащихся в сером элементе контейнера. На данный момент каждый div имеет значение по умолчанию display: block. Таким образом, каждый квадрат занимает всю ширину своей линии.
Чтобы начать работу с Flexbox, вам нужно превратить ваш контейнер в гибкий контейнер . Это так же просто, как:
#container {
display: flex;
}
Немногое изменилось — ваши div теперь отображаются как inline. Но за кулисами вы сделали что-то мощное. Вы дали своим квадратам нечто, называемое гибким контекстом.
Теперь вы можете начать размещать их в этом контексте, с гораздо меньшими трудностями, чем традиционный CSS.
Свойство №2: Flex Direction
У Flexbox контейнера есть две оси: основная ось и пересекающая ось, которые по умолчанию выглядят следующим образом:
По умолчанию элементы располагаются вдоль основной оси, слева направо. Вот почему ваши прямоугольники по умолчанию выстроились по горизонтальной линии после того как вы применили свойство display: flex. Однако flex-direction, позволяет вам вращать основную ось
#container {
display: flex;
flex-direction: column;
}
Есть одно важное различие, которое следует здесь упомянуть:
flex-direction:column не выравнивает прямоугольники по пересекающей оси вместо основной. Он поворачивает саму основную ось из горизонтального положения в вертикальное.
Свойство №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 и pace-between наименее интуитивны. Space-between делает равное расстояние между прямоугольниками, но не между прямоугольниками и контейнером.
Space-around делает одинаковое расстояние с каждой стороны прямоугольника - что собственно означает, что пространство между крайними прямоугольниками и контейнером вдвое меньше, чем между двумя прямоугольниками (каждый из прямоугольников привносит равный, не пересекающийся отступ, что собственно удваивает расстояние).
Заключительное замечание: запомните, что justify-content работает вдоль основной оси а flex-direction переключает основную ось.
Свойство №4: Align Items
Если вы освоили justify-content, то 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. В противном случае свойство height будет переопределятьstretch.)
Для baseline следует помнить, что если вы убираете теги параграфа, он выровняет нижнюю часть прямоугольников, например так:
Для того чтобы лучше продемонстрировать основную и пересекающую оси, давайте совместим свойства justify-content и align-items, и посмотрим как работает различное центрирование для двух flex-direction команд:
С row прямоугольники выстраиваются вдоль горизонтальной основной оси. С column они опускаются вдоль вертикальной основной оси.
Даже если прямоугольники расположены по центру в обоих случаях (как по вертикали, так и по горизонтали), они не являются взаимозаменяемыми!
Свойство №5: Align Self
Align-self позволяет вам вручную управлять выравниванием одного конкретного элемента.
В основном, он переопределяет свойство align-items для одного прямоугольника. Все возможные значения точно такие же как align-items, хотя по умолчанию стоит auto, который наследуется от свойства align-items контейнера.
#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.
Давайте посмотрим на то как это выглядит. Применим align-self двум прямоугольникам, а для остальных поставим align-items: center и flex-direction: row.
Заключение
Несмотря на то, что мы только поцарапали поверхность Flexbox, этих команд должно быть достаточно для обработки большинства основных выравниваний и вертикального расположения элементов вашего содержимого.
.png)
