Гнучке макетування (Flexbox)
Flexbox — це сучасний спосіб розміщення елементів на сторінці, який дозволяє легко створювати гнучкі структури (макети).
Щоб активувати Flexbox, батьківському елементу (контейнеру) потрібно задати властивість display: flex;.
Основні властивості контейнера:
- flex-direction: Визначає напрямок елементів (row — у рядок, column — у стовпчик).
- justify-content: Вирівнює елементи вздовж головної осі (наприклад, center, space-between).
- align-items: Вирівнює елементи по вертикалі.
- flex-wrap: Дозволяє елементам переноситися на новий рядок, якщо вони не вміщуються.
Розглянемо приклад застосування властивостей Flexbox.
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.box {
width: 80px;
height: 80px;background-color: steelblue;
margin: 10px;
}
1. Загальна структура HTML
<!DOCTYPE html> — повідомляє браузеру, що це HTML5.
<html> — початок сторінки.
<head> — службова частина (стилі, налаштування).
<body> — те, що ми бачимо на екрані.
2. Обнулення відступів
CSS
body { margin: 0; }
Браузер за замовчуванням додає відступи. Ми їх прибираємо, щоб блок був точно по центру.
3. Flex-контейнер
CSS
.container { display: flex;
Вмикаємо Flexbox. Всі дочірні елементи стають «гнучкими».
4. Вирівнювання по горизонталі
CSS
justify-content: center;
Розташовує елементи по центру зліва-направо.
5. Вирівнювання по вертикалі
CSS
align-items: center;
Розташовує елементи по центру зверху-вниз.
6. Висота контейнера
CSS
height: 100vh;
100vh = вся висота екрана. Завдяки цьому можна побачити вертикальне центрування
7. Фон контейнера
CSS
background-color: lightgray;
Світло-сірий фон, щоб було видно область контейнера.
8. Стилі для квадратиків
CSS
.box {
width: 80px;
height: 80px;
background-color: steelblue;
margin: 10px; }
width / height → квадрат 80×80 px; background-color → синій колір; margin → відступ між квадратами.
9. HTML-частина (що відображається)
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Є 1 контейнер — це «коробка», яка вирівнює все всередині.
3 однакові блоки всередині. box — це елементи, які ми рухаємо.
В результаті на екрані відображаються 3 сині квадрати, які стоять в один ряд (row — за замовчуванням) і розташовані по центру сторінки (і горизонтально, і вертикально) .