Флексбокс — это первый CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.
Флексбокс задумывался для создания «гибких» раскладок и хранит много тонкостей и чудес, о которых мы поговорим в этой серии курсов. А пока начнём с простого. Как включить флексбокс?
Синтаксис:
display: flex;
После этого происходит два события:
Элемент с display: flex; превращается во «флекс-контейнер» и внутри него начинает происходить вся магия гибкой раскладки.
Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают играть по новым правилам.
Первое, что вы заметите после выполнения этого задания, это то, что блоки растянутся на всю высоту контейнера. Да, внутри флексбокса можно делать элементы одинаковой высоты!
Поэкспериментируем!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Флексбокс, display: flex</title>
<base href="/assets/course96/">
<link href="style.css" rel="stylesheet">
<link href="course.css" rel="stylesheet">
</head>
<body class="house">
<div class="room">
<div class="rug rudolf"></div>
<div class="rug keks"></div>
</div>
</body>
</html>
Вспомните, как ведёт себя обычный поток документа. Блоки и текст располагаются слева направо и сверху вниз.
В привычной блочной модели направления «лево», «право», «верх» и «низ» неизменны. Но внутри флекс-контейнера эти понятия могут изменяться, потому что там можно изменять обычное направление потока.
Вместо направлений «лево» и «право» во флексбоксе используется понятие «главная ось». Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.
По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction, которое задаётся для флекс-контейнера. Значения свойства:
· row — значение по умолчанию, главная ось направлена слева направо.
· column — главная ось направлена сверху вниз.
· row-reverse — главная ось направлена справа налево.
· column-reverse — главная ось направлена снизу вверх.
Флекс-элементы всегда располагаются вдоль главной оси, независимо от её направления.
.room {
display: flex;
flex-direction: column-reverse;
}