Skip to main content

Що таке Flexbox?

CSSJunior~1 хв читання
Запропонувати правку

Flexbox - це модель розкладки в CSS, призначена для зручного вибудовування елементів в одному напрямку: у рядок або в колонку. Вона дозволяє легко вирівнювати, розподіляти і змінювати порядок елементів усередині контейнера без використання float, таблиць і хаотичних відступів.

Ключові особливості Flexbox

  • працює всередині flex-контейнера (display: flex)
  • напрямок можна обрати: по горизонталі або вертикалі (flex-direction)
  • елементи можуть розтягуватися, стискатися і розподілятися рівномірно
  • є гнучке центрування за обома осями (justify-content і align-items)
  • порядок елементів можна змінювати без зміни HTML (order)

Як це виглядає в CSS

css
.container { display: flex; flex-direction: row; /* або column */ justify-content: center; /* вирівнювання по головній осі */ align-items: center; /* вирівнювання по поперечній осі */ }

Для чого застосовується Flexbox

  • створення горизонтальних меню
  • вирівнювання елементів по центру (вертикально і горизонтально)
  • картки в ряд з однаковими відступами
  • адаптивні блоки, які самі стискаються і розтягуються
  • керування відстанями між елементами без margin-милиць

Суть в одному реченні: Flexbox - це гнучка одноосьова система розкладки, яка спрощує розташування і вирівнювання елементів усередині контейнера.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку