Шпаргалка по Flexbox CSS: полный справочник с примерами для верстки

Flexbox CSS — это технология для создания гибких и адаптивных макетов. В этой шпаргалке собраны все свойства flex-container и flex-items с наглядными примерами, которые пригодятся каждому фронтенд-разработчику.

Что такое Flexbox и зачем он нужен?

Flexbox (Flexible Box Layout) решает основные проблемы верстки:

· Вертикальное центрирование без костылей

· Распределение пространства между элементами

· Адаптивность макета на разных устройствах

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

1. display: flex

Базовое свойство, которое включает flex-режим.

```css

.container {

  display: flex; /* или inline-flex */

}

```

2. flex-direction - направление основной оси

Определяет, как располагаются flex-элементы.

Значения:

· row (по умолчанию) - слева направо

· row-reverse - справа налево

· column - сверху вниз

· column-reverse - снизу вверх

3. justify-content - выравнивание по основной оси

Распределяет элементы вдоль главной оси.

Значения:

· flex-start - в начале контейнера

· flex-end - в конце контейнера

· center - по центру

· space-between - равномерно, первый и последний у краев

· space-around - равномерно с отступами по краям

4. align-items - выравнивание по поперечной оси

Определяет выравнивание элементов перпендикулярно основной оси.

Значения:

· stretch (по умолчанию) - растягивает на всю высоту

· flex-start - выравнивание к началу

· flex-end - выравнивание к концу

· center - центрирование

· baseline - по базовой линии текста

Свойства Flex-элементов (дочерние элементы)

5. flex-grow - коэффициент растяжения

Определяет, насколько элемент может увеличиваться относительно других.

```css

.item {

  flex-grow: 1; /* займет доступное пространство */

}

```

6. flex-shrink - коэффициент сжатия

Определяет, насколько элемент может уменьшаться.

```css

.item {

  flex-shrink: 0; /* не будет сжиматься */

}

```

7. flex-basis - базовый размер

Определяет начальный размер элемента до распределения свободного места.

```css

.item {

  flex-basis: 200px; /* начальная ширина 200px */

}

```

8. align-self - индивидуальное выравнивание

Позволяет переопределить выравнивание для отдельного элемента.

```css

.item {

  align-self: flex-end; /* этот элемент будет внизу */

}

```

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

Пример 1: Центрирование по вертикали и горизонтали

```css

.container {

  display: flex;

  justify-content: center; /* горизонтальное центрирование */

  align-items: center;   /* вертикальное центрирование */

  height: 100vh;

}

```

Пример 2: Адаптивное меню навигации

```css

.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px;

}

```

Пример 3: Карточки одинаковой высоты

```css

.cards-container {

  display: flex;

  gap: 20px;

}

.card {

  flex: 1; /* все карточки одинаковой ширины */

  min-height: 200px;

}

```

Частые проблемы и решения

Проблема: Элементы не переносятся на новую строку

Решение: Добавьте flex-wrap: wrap к контейнеру.

Проблема: Элементы сжимаются слишком сильно

Решение: Установите flex-shrink: 0 для элементов.

Проблема: Не работает вертикальное центрирование

Решение: Проверьте высоту контейнера и используйте align-items: center.

Часто задаваемые вопросы по Flexbox

❓ В чем разница между justify-content и align-items?

· justify-content работает по главной оси (обычно горизонтально)

· align-items работает по поперечной оси (обычно вертикально)

❓ Когда использовать flex-basis вместо width?

flex-basis устанавливает размер вдоль главной оси, поэтому при flex-direction: column он будет работать как height, а при row — как width.

❓ Что означает flex: 1?

Это сокращение для:

· flex-grow: 1 - может растягиваться

· flex-shrink: 1 - может сжиматься

· flex-basis: 0 - начальный размер 0

🚀 Эта шпаргалка сэкономила вам время?

В нашем Telegram-канале Фрилансеры Онлайн мы регулярно публикуем:

• Объявления разработчиков и дизайнеров

•Свежие вакансии и заказы на фриланс

•Обсуждения сложных моментов в верстке

•Советы по карьере и развитию

👉 Подписаться на канал "Фрилансеры Онлайн"