Основы CSS. Использование Flexbox для создания гибких макетов в CSS

Flexbox, или Flexible Box Layout, представляет собой мощный модуль CSS, который был разработан для упрощения создания гибких и адаптивных макетов. Flexbox упрощает выравнивание и распределение пространства среди элементов контейнера, особенно при создании сложных макетов.

Основные концепции Flexbox

Flexbox состоит из двух основных компонентов: контейнера flex и элементов flex. Контейнер flex — это родительский элемент, содержащий элементы flex. Элементы flex — это дочерние элементы внутри контейнера flex, которые автоматически адаптируются к доступному пространству.

.container {
  display: flex;
}

Настройка контейнера Flex

display: flex; Это основное свойство, которое преобразует элемент в контейнер flex.

flex-direction Определяет направление основных осей и расположение элементов flex.

• row (по умолчанию): Элементы располагаются по горизонтали слева направо.
• row-reverse: Элементы располагаются по горизонтали справа налево.
• column: Элементы располагаются по вертикали сверху вниз.
• column-reverse: Элементы располагаются по вертикали снизу вверх.

.container {
  flex-direction: row;
}

 justify-content Управляет горизонтальным выравниванием элементов flex.

• flex-start: Элементы выравниваются по началу контейнера.
• flex-end: Элементы выравниваются по концу контейнера.
• center: Элементы выравниваются по центру контейнера.
• space-between: Элементы распределяются с равными промежутками между ними.
• space-around: Элементы распределяются с равными промежутками вокруг них.

.container {
  justify-content: center;
}

align-items Управляет вертикальным выравниванием элементов flex.

• stretch (по умолчанию): Элементы растягиваются, чтобы заполнить контейнер.
• flex-start: Элементы выравниваются по началу контейнера.
• flex-end: Элементы выравниваются по концу контейнера.
• center: Элементы выравниваются по центру контейнера.
• baseline: Элементы выравниваются по базовой линии текста

.container {
  align-items: center;
}

flex-wrap Управляет переносом элементов flex на новую строку или колонку.

• nowrap (по умолчанию): Все элементы располагаются в одной строке или колонке.
• wrap: Элементы переносятся на новую строку или колонку при необходимости.
• wrap-reverse: Элементы переносятся на новую строку или колонку в обратном порядке.

.container {
  flex-wrap: wrap;
}

Настройка элементов Flex

1. flex-grow Определяет, как элемент будет расти относительно других элементов внутри контейнера flex.

.item {
  flex-grow: 1;
}

2. flex-shrink Определяет, как элемент будет сжиматься относительно других элементов внутри контейнера flex.

.item {
  flex-shrink: 1;
}

3. flex-basis Задает начальный размер элемента перед распределением свободного пространства.

.item {
  flex-basis: 200px;
}

4. align-self Управляет вертикальным выравниванием элемента внутри контейнера flex, переопределяя значение align-items.

.item {
  align-self: flex-end;
}

Потренироваться с Flexbox можно здесь