Урок 22. Примеры: Введение во Flexbox

В каждом примере сверху — живой результат, снизу — код. Примеры идут по нарастанию сложности.

1. display: flex — один ряд из детей

Блочные элементы обычно встают друг под другом. Стоит написать display: flex на родителе — и его прямые дети выстраиваются в строку.

<div class="row">
  <div>1</div><div>2</div><div>3</div>
</div>

.row {
  display: flex;
  gap: .5rem;
}

2. flex-direction — строка или колонка

row (по умолчанию) выстраивает элементы по главной оси-горизонтали, column — по вертикали. Сравни два контейнера:

.row    { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }

3. justify-content — выравнивание вдоль главной оси

Это свойство «раскладывает предметы по рейке»: прижать к началу, к концу, в центр или распределить промежутки. Каждое значение — отдельный живой блок.

.bar { display: flex; }
/* меняем только одно значение: */
.bar { justify-content: flex-start; }
.bar { justify-content: center; }
.bar { justify-content: space-between; }
.bar { justify-content: space-around; }

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

При flex-direction: row поперечная ось вертикальна, поэтому align-items управляет выравниванием по высоте. Блоки разной высоты выровнены по-разному:

.box { display: flex; }
.box { align-items: flex-start; }  /* по верху */
.box { align-items: center; }      /* по центру */

5. Типовой приём: горизонтальное меню навигации

Логотип слева, ссылки справа — классическая шапка на flex с justify-content: space-between и align-items: center.

<nav class="navbar">
  <strong>🚀 MySite</strong>
  <div class="links">...</div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.links { display: flex; gap: 1.2rem; }

6. Центрирование по обеим осям

«Святой грааль» вёрстки: justify-content: center + align-items: center ставят содержимое строго в центр контейнера.

.center {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
  height: 120px;
}