10.1 Адаптивні колонки
Flexbox призначений для одномірних композицій, що означає, що він ідеально підходить для розташування елементів у рядку чи колонці. Розглянемо основи Flexbox, а також техніки для створення складних та відгукливих макетів.
Flex-контейнер та Flex-елементи
- Flex-контейнер: елемент, до якого застосовується властивість
display: flex. Цей контейнер керує розташуванням усіх дочірніх елементів (flex-елементів) - Flex-елементи: дочірні елементи flex-контейнера
1. Створення адаптивних колонок
Приклад створення адаптивних колонок за допомогою flex-wrap, flex-grow, flex-shrink та flex-basis:
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивні колонки з Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">Колонка 1</div>
<div class="flex-item">Колонка 2</div>
<div class="flex-item">Колонка 3</div>
</div>
</body>
</html>
Пояснення коду:
-
.flex-container: визначає контейнер як flex-контейнер з елементами, що можуть переноситися на наступний рядок при браку місця (flex-wrap: wrap) -
.flex-item: елементи мають однакові розміри і можуть адаптуватися до доступного простору (flex: 1 1 200px)
10.2 Адаптивна галерея зображень
Створимо адаптивну галерею зображень, яка змінює кількість колонок залежно від розміру екрану:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="зображення 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="зображення 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="зображення 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="зображення 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="зображення 5">
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Зображення 1">
<img src="image2.jpg" alt="Зображення 2">
<img src="image3.jpg" alt="Зображення 3">
<img src="image4.jpg" alt="Зображення 4">
<img src="image5.jpg" alt="Зображення 5">
</div>
</body>
</html>
Пояснення:
- На великих екранах зображення займають третину ширини контейнера
- На екранах шириною до 768 пікселів зображення займають половину ширини контейнера
- На екранах шириною до 480 пікселів зображення займають повну ширину контейнера
10.3 Складний адаптивний макет з Flexbox
Створимо складний макет з використанням Flexbox, який включає хедер, сайдбар, основний контент і футер, що адаптується до різних розмірів екрану:
HTML
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ