Глосарій

Flexbox (CSS)

Flexbox (Flexible Box Layout) — CSS-модель розкладки для вирівнювання елементів в один рядок або стовпець. Вирішує класичні задачі верстки: вертикальне центрування, рівномірний розподіл, адаптивні навбари.

Основні властивості контейнера

.container {
  display: flex;
  flex-direction: row | column;        /* вісь */
  justify-content: flex-start | center | space-between | space-around;
  align-items: stretch | center | flex-start | flex-end;
  flex-wrap: nowrap | wrap;            /* перенос на новий рядок */
  gap: 16px;                           /* відступи між елементами */
}

Властивості елементів

.item {
  flex: 1;          /* grow + shrink + basis = рівномірний розподіл */
  flex-grow: 2;     /* займати вдвічі більше вільного місця */
  align-self: center; /* індивідуальне вирівнювання */
  order: -1;        /* змінити порядок без зміни HTML */
}

Flexbox vs Grid

Flexbox — одновимірний (рядок АБО стовпець). CSS Grid — двовимірний (рядки І стовпці одночасно). Для навбару і карточок — Flexbox. Для складних сторінкових розкладок — Grid.