📐 Полное руководство по CSS Flexbox

⏱️ 15 мин чтения 📊 Начинающий 👁️ 86 просмотров 📑 8 разделов

CSS Flexbox — это мощный инструмент для создания гибких одномерных раскладок. В этом руководстве вы изучите все свойства Flexbox с интерактивными примерами.

Flexbox идеально подходит для:

  • Центрирования элементов
  • Создания навигационных меню
  • Распределения пространства между элементами
  • Адаптивных раскладок

Что такое Flexbox?

Flexbox (Flexible Box Layout) — это модуль CSS3, который предоставляет эффективный способ размещения, выравнивания и распределения пространства между элементами контейнера.

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

Flexbox работает с двумя типами элементов:

  • Flex-контейнер — родительский элемент с display: flex
  • Flex-элементы — дочерние элементы контейнера
👁️ Базовая структура Flexbox
Item 1
Item 2
Item 3
Базовая структура Flexbox CSS 
/* Flex-контейнер */
.container {
  display: flex;
}

/* Flex-элементы */
.item {
  flex: 1;
}

display: flex

Чтобы начать использовать Flexbox, нужно применить display: flex или display: inline-flex к родительскому элементу.

👁️ display: flex vs display: inline-flex
display: flex (блочный):
1
2
display: inline-flex (строчный):
1
2
display: flex vs display: inline-flex CSS 
/* Блочный flex-контейнер */
.flex-container {
  display: flex;
}

/* Строчный flex-контейнер */
.inline-flex-container {
  display: inline-flex;
}

flex-direction

Свойство flex-direction определяет главную ось (направление размещения flex-элементов).

Возможные значения:

  • row — слева направо (по умолчанию)
  • row-reverse — справа налево
  • column — сверху вниз
  • column-reverse — снизу вверх
🎮

Интерактивное демо: flex-direction

LIVE
👁️ Предпросмотр:
1
2
3
📋 Сгенерированный CSS:
display: flex; flex-direction: row;
👁️ flex-direction: row (по умолчанию)
1
2
3
flex-direction: row (по умолчанию) CSS 
.container {
  display: flex;
  flex-direction: row;
}
👁️ flex-direction: column
1
2
3
flex-direction: column CSS 
.container {
  display: flex;
  flex-direction: column;
}

justify-content

Свойство justify-content выравнивает элементы вдоль главной оси.

Возможные значения:

  • flex-start — в начале (по умолчанию)
  • flex-end — в конце
  • center — по центру
  • space-between — равные промежутки между элементами
  • space-around — равные промежутки вокруг элементов
  • space-evenly — абсолютно равные промежутки
🎮

Интерактивное демо: justify-content

LIVE
👁️ Предпросмотр:
1
2
3
📋 Сгенерированный CSS:
display: flex; justify-content: center;
👁️ justify-content: flex-start
1
2
3
justify-content: flex-start CSS 
.container {
  display: flex;
  justify-content: flex-start;
}
👁️ justify-content: center
1
2
3
justify-content: center CSS 
.container {
  display: flex;
  justify-content: center;
}
👁️ justify-content: space-between
1
2
3
justify-content: space-between CSS 
.container {
  display: flex;
  justify-content: space-between;
}

align-items

Свойство align-items выравнивает элементы вдоль поперечной оси.

Возможные значения:

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

Интерактивное демо: align-items

LIVE
👁️ Предпросмотр:
1
2
3
📋 Сгенерированный CSS:
display: flex; align-items: center;
👁️ align-items: stretch (по умолчанию)
1
2
3
align-items: stretch (по умолчанию) CSS 
.container {
  display: flex;
  align-items: stretch;
  height: 200px;
}
👁️ align-items: center
1
2
3
align-items: center CSS 
.container {
  display: flex;
  align-items: center;
  height: 200px;
}

flex-wrap

По умолчанию flex-элементы располагаются в одну линию. Свойство flex-wrap позволяет переносить элементы на новую строку.

Возможные значения:

  • nowrap — без переноса (по умолчанию)
  • wrap — перенос на новую строку
  • wrap-reverse — перенос в обратном порядке
🎮

Интерактивное демо: flex-wrap

LIVE
👁️ Предпросмотр:
1
2
3
4
📋 Сгенерированный CSS:
display: flex; flex-wrap: nowrap;
👁️ flex-wrap: nowrap (по умолчанию)
1
2
3
4
flex-wrap: nowrap (по умолчанию) CSS 
.container {
  display: flex;
  flex-wrap: nowrap;
}
👁️ flex-wrap: wrap
1
2
3
4
flex-wrap: wrap CSS 
.container {
  display: flex;
  flex-wrap: wrap;
}

flex-grow, flex-shrink, flex-basis

Эти свойства управляют размером flex-элементов:

  • flex-grow — насколько элемент может расти
  • flex-shrink — насколько элемент может сжиматься
  • flex-basis — начальный размер элемента

Краткая запись: flex: 1 1 200px

👁️ flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 1 CSS 
.item {
  flex-grow: 1;
}
👁️ flex: 1 1 200px (сокращённая запись)
flex: 1 1 200px
flex: 2 1 200px
flex: 1 1 200px (сокращённая запись) CSS 
.item {
  flex: 1 1 200px;
  /* flex-grow: 1 */
  /* flex-shrink: 1 */
  /* flex-basis: 200px */
}

Практические примеры

Давайте рассмотрим несколько практических примеров использования Flexbox.

👁️ Центрирование элемента
Центрированный элемент
Центрирование элемента CSS 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
👁️ Навигационное меню
Навигационное меню CSS 
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}
👁️ Адаптивная сетка карточек
Карточка 1
Карточка 2
Карточка 3
Адаптивная сетка карточек CSS 
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 calc(33.333% - 1.5rem);
  min-width: 250px;
}