Урок 24. Примеры: Выравнивание: justify-content, align-items, gap

Рабочие примеры

Примеры идут по возрастанию: сначала align-items, затем «выбивающийся» элемент align-self, потом gap, и наконец flex-grow/flex: 1.

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

Контейнеру задана высота, поэтому видно разницу. Слева flex-start, справа center.

.row {
  display: flex;
  min-height: 96px;
  align-items: flex-start; /* или center, flex-end, stretch */
}

2. align-self — один элемент выбивается из общего выравнивания

Вся строка выровнена по центру (align-items: center), но второй блок прижат к низу через align-self: flex-end.

.row { display: flex; min-height: 110px; align-items: center; }

/* перебивает align-items только для этого элемента */
.row .item-2 { align-self: flex-end; }

3. gap — промежутки без margin-хаков

Один gap задаёт одинаковое расстояние между всеми элементами. Нет отступа у краёв и не нужно обнулять margin у последнего.

.row {
  display: flex;
  gap: 8px;   /* промежуток только МЕЖДУ элементами */
}

/* раздельно: gap: row-gap column-gap */
.grid { display: flex; flex-wrap: wrap; gap: 8px 28px; }

4. flex-grow — кто занимает свободное место

У второго блока flex-grow: 1 — он один «доедает» всё свободное пространство строки, остальные остаются по содержимому.

.toolbar { display: flex; gap: 8px; }

/* растягивается только поле поиска */
.toolbar .search { flex-grow: 1; }

5. flex: 1 — равные колонки

Шорткат flex: 1 (= flex: 1 1 0) на всех элементах делит ширину поровну, независимо от длины содержимого.

.cols { display: flex; gap: 8px; }
.cols > * { flex: 1; }   /* flex: 1 1 0 — равные доли */

6. Панель действий: всё вместе

Логотип слева, поле растягивается (flex: 1), кнопка справа; выравнивание по центру по поперечной оси, промежутки — gap.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toolbar input { flex: 1; }      /* поле тянется */
/* кнопка и логотип остаются своего размера */