5. Flexbox

CSS: Flexbox основы

Что такое Flexbox?

Flexbox (Flexible Box Layout module) — это одномерный макетный модуль CSS, предназначенный для эффективного размещения элементов внутри контейнера, распределения пространства между ними и их выравнивания, даже если их размер неизвестен или динамичен. “Одномерный” означает, что Flexbox работает либо вдоль основной оси (горизонтально), либо вдоль поперечной оси (вертикально) за один раз.

В основе Flexbox лежит концепция Flex-контейнера (родительского элемента) и Flex-элементов (его прямых потомков). Большинство свойств Flexbox применяются либо к контейнеру, либо к элементам, но не к обоим сразу.

Свойства Flex-контейнера (родителя)

Эти свойства применяются к элементу, который становится Flex-контейнером.

• display: flex; | inline-flex;
  • Определяет элемент как Flex-контейнер. flex — блочный, inline-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-элементы вдоль поперечной оси текущей строки.
  • Значения: flex-start, flex-end, center, baseline, stretch (по умолчанию).
• flex-wrap:
  • Управляет переносом Flex-элементов на новую строку (или столбец), если они не умещаются в одну строку/столбец.
  • Значения: nowrap (по умолчанию), wrap, wrap-reverse.
• gap: | row-gap: | column-gap:
  • Устанавливает промежутки между Flex-элементами (современная альтернатива margin).

Свойства Flex-элементов (потомков)

Эти свойства применяются к прямым потомкам Flex-контейнера.

• flex-grow:
  • Определяет, насколько Flex-элемент может вырасти относительно других элементов, если есть свободное пространство. По умолчанию 0.
• flex-shrink:
  • Определяет, насколько Flex-элемент может сжаться относительно других элементов, если не хватает места. По умолчанию 1.
• flex-basis:
  • Определяет начальный размер элемента перед распределением свободного пространства. Может быть auto (по умолчанию, основано на ширине/высоте содержимого) или значением длины (например, 100px, 20%).
• flex:
  • Сокращенная запись для flex-grow, flex-shrink и flex-basis.
  • Пример: flex: 1 1 auto;
• align-self:
  • Переопределяет свойство align-items для конкретного Flex-элемента. Принимает те же значения, что и align-items.

Примеры использования

Пример 1: Базовый Flex-контейнер и направление

.container-1 {
    display: flex; /* Делаем родителя flex-контейнером */
    flex-direction: row; /* Элементы располагаются в строку (по умолчанию) */
    border: 2px solid #007bff;
    padding: 10px;
    gap: 10px; /* Отступ между элементами */
}
.item-1 {
    background-color: #e0f7fa;
    padding: 20px;
    border: 1px solid #00bcd4;
}
/* HTML:
<div class="container-1">
    <div class="item-1">Элемент 1</div>
    <div class="item-1">Элемент 2</div>
    <div class="item-1">Элемент 3</div>
</div>
*/

Пример 2: Выравнивание элементов по центру

.container-2 {
    display: flex;
    justify-content: center; /* Центрирует элементы по горизонтали */
    align-items: center; /* Центрирует элементы по вертикали */
    height: 150px; /* Важно: для align-items нужна высота */
    border: 2px solid #28a745;
}
.item-2 {
    width: 60px;
    height: 60px;
    background-color: #e8f5e9;
    margin: 5px;
}
/* HTML:
<div class="container-2">
    <div class="item-2"></div>
    <div class="item-2"></div>
</div>
*/

Пример 3: Распределение пространства с space-between и flex-wrap

.container-3 {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    justify-content: space-between; /* Элементы по краям, пространство между ними */
    width: 300px; /* Узкий контейнер для демонстрации wrap */
    border: 2px solid #ffc107;
    padding: 5px;
    gap: 10px;
}
.item-3 {
    width: 80px;
    height: 40px;
    background-color: #fff8e1;
}
/* HTML:
<div class="container-3">
    <div class="item-3"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
</div>
*/

Пример 4: Гибкие элементы с flex-grow и flex-basis

.container-4 {
    display: flex;
    width: 400px;
    border: 2px solid #dc3545;
    padding: 5px;
}
.item-4-1 {
    flex-basis: 100px; /* Начальный размер 100px */
    background-color: #ffebee;
    padding: 10px;
}
.item-4-2 {
    flex-grow: 1; /* Займет все оставшееся пространство */
    background-color: #ffcdd2;
    padding: 10px;
}
.item-4-3 {
    flex-grow: 2; /* Займет в 2 раза больше пространства, чем item-4-2 */
    background-color: #ef9a9a;
    padding: 10px;
}
/* HTML:
<div class="container-4">
    <div class="item-4-1">База 100px</div>
    <div class="item-4-2">Растем x1</div>
    <div class="item-4-3">Растем x2</div>
</div>
*/

Пример 5: Использование сокращенного свойства flex

.container-5 {
    display: flex;
    width: 350px;
    border: 2px solid #6f42c1;
    padding: 5px;
}
.item-5-1 {
    flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    background-color: #ede7f6;
    padding: 10px;
}
.item-5-2 {
    flex: 2 1 100px; /* grow: 2, shrink: 1, basis: 100px */
    background-color: #d1c4e9;
    padding: 10px;
}
/* HTML:
<div class="container-5">
    <div class="item-5-1">Flex: 1</div>
    <div class="item-5-2">Flex: 2 1 100px</div>
</div>
*/

Типичные ошибки

1. Забыть display: flex;: Самая распространенная ошибка — пытаться применять свойства Flexbox к элементам, которые не являются частью Flex-контейнера. Всегда начинайте с display: flex; на родительском элементе.
2. Неправильная ось: Пытаться выравнивать элементы с помощью justify-content, когда нужно использовать align-items, или наоборот. Помните, justify-content работает по основной оси (flex-direction), а align-items — по поперечной.
3. Отсутствие высоты/ширины контейнера: Для эффективной работы align-items (выравнивание по поперечной оси), Flex-контейнер должен иметь определенную высоту (или высоту, которая определяется его содержимым). Аналогично для justify-content при column направлении.
4. margin: auto; против Flexbox свойств: Хотя margin: auto; работает внутри Flexbox для центрирования или разделения элементов, чаще всего для распределения пространства лучше использовать justify-content или align-self.

🎯 Практика

1. Создайте div с классом my-flex-container.
2. Внутри него создайте три div с классом my-flex-item.
3. Примените display: flex; к my-flex-container.
4. Расположите первый элемент слева, третий справа, а второй — точно по центру между ними, используя justify-content.
5. Сделайте так, чтобы средний элемент занимал в три раза больше ширины, чем два других, используя свойство flex.

💡 Совет

Используйте инструменты разработчика браузера (Developer Tools). Большинство современных браузеров (Chrome, Firefox, Edge) имеют специальные инструменты для отладки Flexbox, которые подсвечивают Flex-контейнеры и элементы, показывают их оси и позволяют интерактивно менять Flexbox-свойства, чтобы сразу увидеть результат. Это незаменимый инструмент для изучения и отладки Flexbox макетов.

Интерактивный пример