Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.
Основная задача Flexbox — сделать слои гибкими, а работу с ними — интуитивно понятными. Для достижения этой цели он позволяет контейнерам самим решать, как обращаться со своими дочерними элементами, в том числе изменять их размер и расстояние между ними.
Звучит неплохо, но давайте посмотрим, так ли оно гладко на практике. В этой статье мы изучим 5 самых популярных свойств Flexbox, разберемся, что они делают, и как они на самом деле работают.
Display: Flex
Вот пример страницы:
У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block. Поэтому каждый квадрат занимает всю ширину строки.
Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:
|
1
2
3
|
#container {
display:flex;
}
|
Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое «flex-контекст».
Flex Direction
У flex-контейнера есть две оси: главная ось и перпендикулярная ей.
По умолчанию все предметы располагаются вдоль главной оси: слева направо. Поэтому наши квадраты выровнялись в линию, когда мы применили display: flex. Однакоflex-direction позволяет вращать главную ось.
|
1
2
3
4
|
#container {
display:flex;
flex-direction:column;
}
|
Важно заметить, что flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.
Есть еще парочка свойств для flex-direction: row-reverse и column-reverse.
Justify Content
Justify-content отвечает за выравнивание элементов по главной оси.
Вернемся к flex-direction: row.
|
1
2
3
4
5
|
#container {
display:flex;
flex-direction:row;
justify-content:flex-start;
}
|
Justify-content может принимать 5 значений:
flex-start;flex-end;center;space-between;space-around.
Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.
Align Items
Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.
Вернемся обратно к flex-direction: row и пройдемся по командам align-items:
flex-start;flex-end;center;stretch;baseline.
Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto. Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:
Чтобы получше разобраться в том, как работают оси, давайте объединим justify-contentс align-items и посмотрим, как работает выравнивание по центру для двух свойствflex-direction:
Align Self
Align-self позволяет выравнивать элементы по отдельности.
|
1
2
3
4
5
6
7
|
#container {
align-items:flex-start;
}
.square#one {
align-self:center;
}
//Onlythissquarewillbecentered.
|
Давайте для двух квадратов применим align-self, а для остальных применимalign-items: center и flex-direction: row.
Заключение
Хотя мы рассмотрели лишь верхушку айсберга по имени Flexbox, этого хватит, чтобы работать с выравниваниям — в том числе и с вертикальными.
Перевод статьи «How Flexbox works — explained with big, colorful, animated gifs»
Источник: https://tproger.ru/translations/how-css-flexbox-works/