Flexbox (Flexible Box Layout module) — это одномерный модуль макета CSS, предназначенный для распределения пространства между элементами и мощных возможностей выравнивания внутри контейнера.
Он значительно упрощает создание сложных, адаптивных макетов по сравнению с традиционными методами, такими как плавающие элементы (floats) или позиционирование.
Почему Flexbox?
До появления Flexbox центрирование элементов, создание равномерных промежутков или выравнивание элементов в одну линию было довольно трудоемкой задачей. Flexbox решает эти проблемы элегантно и эффективно:
* Простота выравнивания: Легко выравнивать элементы по горизонтали или вертикали.
* Гибкость: Элементы могут сжиматься или расширяться, чтобы заполнить доступное пространство.
* Порядок элементов: Вы можете изменять визуальный порядок элементов, не меняя их порядок в HTML‑коде.
* Адаптивность: Идеально подходит для создания адаптивных макетов, которые хорошо выглядят на любом размере экрана.
Основные концепции Flexbox
Flexbox работает с двумя основными типами элементов:
* Flex‑контейнер (Flex Container): Родительский элемент, который становится гибким контейнером, когда вы применяете к нему `display: flex;` или `display: inline‑flex;`.
* Flex‑элементы (Flex Items): Дочерние элементы внутри flex‑контейнера.
Пример структуры HTML:
Код
<div class="flex-container">
<div class="flex-item">Элемент 1</div>
<div class="flex-item">Элемент 2</div>
<div class="flex-item">Элемент 3</div>
</div>
<div class="flex-item">Элемент 1</div>
<div class="flex-item">Элемент 2</div>
<div class="flex-item">Элемент 3</div>
</div>
Свойства Flex‑контейнера
Эти свойства применяются к родительскому элементу (`.flex-container`):
* `display: flex;` (или `inline‑flex;`): Определяет элемент как flex‑контейнер. Это первый и самый важный шаг.
* `flex-direction`: Определяет основную ось, по которой расположены flex‑элементы (горизонтально или вертикально):
- * `row` (по умолчанию): Элементы располагаются слева направо.
- * `row-reverse`: Элементы располагаются справа налево.
- * `column`: Элементы располагаются сверху вниз.
- * `column-reverse`: Элементы располагаются снизу вверх.
- * `justify-content`: Выравнивает flex‑элементы вдоль основной оси:
- * `flex-start` (по умолчанию): Элементы прижаты к началу.
- * `flex-end`: Элементы прижаты к концу.
- * `center`: Элементы центрированы.
- * `space-between`: Первый элемент прижат к началу, последний — к концу, остальные равномерно распределены.
- * `space-around`: Элементы равномерно распределены с равным пространством вокруг них.
- * `space-evenly`: Элементы равномерно распределены с равным пространством между ними и по краям.
- * `align-items`: Выравнивает flex‑элементы вдоль поперечной оси (перпендикулярно основной оси):
- * `stretch` (по умолчанию): Элементы растягиваются, чтобы заполнить контейнер.
- * `flex-start`: Элементы прижаты к началу поперечной оси.
- * `flex-end`: Элементы прижаты к концу поперечной оси.
- * `center`: Элементы центрированы по поперечной оси.
- * `baseline`: Элементы выравниваются по базовой линии их содержимого.
- * `flex-wrap`: Определяет, будут ли flex‑элементы переноситься на новую строку:
- * `nowrap` (по умолчанию): Все элементы будут в одной строке.
- * `wrap`: Элементы будут переноситься на новые строки, если они не помещаются.
- * `wrap-reverse`: То же, что и `wrap`, но перенос происходит в обратном направлении.
Свойства Flex‑элементов
Эти свойства применяются к дочерним элементам (`.flex-item`):
- * `flex-grow`: Определяет, сколько свободного пространства должно быть выделено элементу относительно других flex‑элементов. Значение `1` обычно означает, что элемент будет расти, чтобы занять доступное пространство.
- * `flex-shrink`: Определяет, насколько элемент может сжиматься относительно других flex‑элементов. Значение `1` (по умолчанию) означает, что элемент будет сжиматься, если не хватает места.
- * `flex-basis`: Определяет начальный размер элемента до того, как будет распределено свободное пространство.
- * `order`: Позволяет изменить визуальный порядок элемента внутри flex‑контейнера. По умолчанию все элементы имеют `order: 0`. Элементы с меньшим значением `order` располагаются раньше.
Пример использования: Центральный блок на странице
Чтобы центрировать блок по горизонтали и вертикали с помощью Flexbox:
Код
<style>
body {
display: flex; /* Делаем body flex‑контейнером */
justify-content: center; /* Центрируем по горизонтали */
align-items: center; /* Центрируем по вертикали */
min-height: 100vh; /* Убеждаемся, что body занимает всю высоту viewport */
margin: 0;
}
.centered-block {
width: 200px;
height: 200px;
background-color: lightblue;
display: flex; /* Если содержимое внутри блока тоже нужно центрировать */
justify-content: center;
align-items: center;
}
</style>
body {
display: flex; /* Делаем body flex‑контейнером */
justify-content: center; /* Центрируем по горизонтали */
align-items: center; /* Центрируем по вертикали */
min-height: 100vh; /* Убеждаемся, что body занимает всю высоту viewport */
margin: 0;
}
.centered-block {
width: 200px;
height: 200px;
background-color: lightblue;
display: flex; /* Если содержимое внутри блока тоже нужно центрировать */
justify-content: center;
align-items: center;
}
</style>
Код
<div class="centered-block">
<p>Я по центру!</p>
</div>
<p>Я по центру!</p>
</div>
Заключение
Flexbox — это фундаментальный инструмент для любого современного веб‑разработчика. Он значительно упрощает создание адаптивных и сложных макетов, делая ваш код чище и понятнее. Освоение Flexbox откроет перед вами множество возможностей для дизайна. Практикуйтесь с различными свойствами и их комбинациями, чтобы полностью понять его мощь!
