WebUniverseCSS Flexbox. Частина 1
Пояснення:
Уявіть, що вебсторінка - це коробка, у якій лежать інші коробочки (наприклад, кнопки, картинки, тексти). Іноді ці коробочки розташовуються як попало, стрибають по сторінці, не хочуть ставати рівно. Цей код перетворює всю сторінку (body) на розумне поле для вирівнювання і каже нашому квадрату (або будь-якому іншому елементу) стати точно по центру.
Ми дали три інструкції для body (тіла сторінки):
display: flex; - Тепер ти вмієш контролювати, де саме знаходяться твої дочірні елементи.
(Без цього режиму наступні дві команди не працюватимуть)
justify-content: center; - Елемент посередині між лівим і правим краєм.
align-items: center; - Елемент посередині між верхнім і нижнім краєм.
Ці три рядки разом - це найшвидший і найзручніший спосіб у CSS абсолютно центрувати будь-який елемент на сторінці.
Що означає height: 100vh;
height - очевидно, встановлює висоту елемента.
100vh - одиниця вимірювання в CSS, яка називається "viewport height" (висота області перегляду).
Коли ми встановлюємо 100vh, це означає, що висота елемента (body) повинна дорівнювати 100% висоти вікна браузера, незалежно від вмісту чи розміру екрана.
Тепер, коли body займає всю видиму висоту, команди display: flex;, justify-content: center; та align-items: center; працюють коректно, розміщуючи квадрат точно по центру екрана, навіть якщо користувач прокручує сторінку.
Українською:
Англійською:
Таблиця:
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | display: flex | | display: flex створює гнучкий контейнер, у якому елементи легко вирівнюються й розподіляються в ряд або стовпець. |
| 2 | justify-content | | justify-content вирівнює елементи вздовж головної осі. Значення: start — ліворуч; center — по центру; end — праворуч; space-between — рівні проміжки між елементами; space-around — проміжки з боків наполовину менші; space-evenly — рівні проміжки всюди. |
| 3 | align-items | | align-items вирівнює елементи по поперечній осі. Значення: center — по центру вертикалі; start — по верхньому краю; end — по нижньому; stretch — розтягує; baseline — вирівнює по базовій лінії тексту. |
| 4 | flex | | Кожен елемент з flex: 1 ділить доступний простір порівну. Три елементи — три рівні частини. |
| 5 | gap | | gap задає відстань між елементами всередині flex-контейнера. |
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC