06. Введение в Flexbox

Что такое Flexbox

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

Flexbox — это как умный контейнер, который сам знает, как выстроить элементы красиво и пропорционально.

Создание flex-контейнера

Чтобы использовать Flexbox, нужно задать контейнеру свойство

display: flex;

Все вложенные элементы становятся flex-элементами.

Пример базового контейнера


.container {
  display: flex;
  background-color: #1e1e1e;
  padding: 20px;
  gap: 16px;
}.item {
  background-color: #007bff;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
}

HTML:


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Результат: три равных блока, выстроенных в одну строку с равными промежутками.

Основные свойства контейнера

```
display: flex
```
— активирует flex-режим.
```
flex-direction
```
— направление оси:
```
row
```
,
```
column
```
```
justify-content
```
— выравнивание по главной оси.
```
align-items
```
— выравнивание по поперечной оси.
```
gap
```
— расстояние между элементами.

Пример: выравнивание элементов


.container {
  display: flex;
  justify-content: space-between; /* Распределение по горизонтали */
  align-items: center;           /* Центрирование по вертикали */
  height: 150px;
  background: #2b2b2b;
  padding: 20px;
}.item {
  background: #28a745;
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
}

Выравнивание по главной оси

Свойство justify-content управляет расположением элементов по горизонтали (если направление — row).

Варианты:

```
flex-start
```
— элементы прижаты к началу контейнера.
```
center
```
— по центру.
```
space-between
```
— равные промежутки между элементами.
```
space-around
```
— равные отступы вокруг элементов.
```
space-evenly
```
— равномерное распределение.

Выравнивание по поперечной оси

Свойство align-items определяет, как элементы выравниваются по вертикали.

Примеры:

```
flex-start
```
— прижаты к верху контейнера.
```
center
```
— по центру.
```
flex-end
```
— прижаты к низу.
```
stretch
```
— растягиваются по высоте контейнера.

Перенос строк (flex-wrap)

По умолчанию элементы Flexbox стараются уместиться в одну строку. Чтобы они переносились, добавьте свойство

flex-wrap: wrap;

Пример:


.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}.item {
  flex: 1 1 200px; /* ширина и адаптация */
  background: #6610f2;
  color: white;
  padding: 15px;
  text-align: center;
}

Теперь блоки автоматически переходят на следующую строку, если экран узкий.

Управление размером элементов

Каждый элемент можно контролировать с помощью свойства flex. Оно объединяет три параметра:

flex-grow — как элемент растягивается, если есть свободное место.
flex-shrink — как сжимается, если места не хватает.
flex-basis — начальная ширина элемента.

Пример:


.item1 { flex: 1 1 200px; }
.item2 { flex: 2 1 200px; }
.item3 { flex: 1 1 200px; }

В этом примере второй блок занимает вдвое больше места, чем первый и третий.

Практика: карточки галереи

HTML


<div class="gallery">
  <div class="photo">Фото 1</div>
  <div class="photo">Фото 2</div>
  <div class="photo">Фото 3</div>
  <div class="photo">Фото 4</div>
</div>

CSS


.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}.photo {
  background: #1f1f1f;
  border: 1px solid #333;
  color: white;
  padding: 30px;
  flex: 1 1 200px;
  text-align: center;
  border-radius: 8px;
  transition: transform 0.2s ease;
}.photo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

Результат:

Карточки выстраиваются в ряд, равномерно распределяются и автоматически перестраиваются при изменении ширины окна — идеально для галерей и адаптивных сеток.

Итоги урока

Теперь вы знаете:

Что такое Flexbox и зачем он нужен.
Как управлять выравниванием элементов с помощью justify-content и align-items.
Как использовать flex-wrap для переноса строк.
Как задавать гибкие размеры с помощью flex-grow, flex-shrink и flex-basis.
Как применять Flexbox для создания адаптивных сеток и карточек.