10.1 Проста сітка
Flexbox дозволяє створювати гнучкі та адаптивні макети. Зараз ми розглянемо декілька прикладів використання Flexbox для створення різних макетів, включаючи просту сітку, центрування елементів, створення навігаційних меню та карток товарів.
Створення простої сітки за допомогою Flexbox. Цей приклад демонструє, як можна легко створити рівномірно розподілені елементи в контейнері.
Приклад використання:
.flex-container {
display: flex;
flex-wrap: wrap; /* Дозволяє елементам переноситися на новий рядок */
background-color: lightgrey;
padding: 10px;
}
.flex-item {
background-color: deepskyblue;
margin: 10px;
padding: 20px;
color: white;
font-size: 20px;
flex: 1 1 calc(33.333% - 40px); /* Гнучке розподілення простору */
box-sizing: border-box;
}
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
flex-basis: calc(33.333% - 40px): визначає початковий розмір елемента до того, як буде застосовано будь-яке розтягнення або стискання. У цьому випадку, елемент займатиме 33.333% ширини контейнера мінус 40 пікселів. calc() дозволяє виконувати обчислення прямо в CSS.
10.2 Центрування елементів
Центрування елементів по горизонталі та вертикалі в контейнері за допомогою Flexbox.
Приклад використання:
.flex-container {
display: flex;
justify-content: center; /* Центрування по горизонталі */
align-items: center; /* Центрування по вертикалі */
height: 100vh; /* Висота контейнера на весь екран */
background-color: lightgrey;
}
.flex-item {
background-color: deepskyblue;
padding: 20px;
color: white;
font-size: 20px;
}
<div class="flex-container">
<div class="flex-item">Centered Item</div>
</div>
10.3 Навігаційне меню
Створення горизонтального навігаційного меню за допомогою Flexbox.
Приклад використання:
.nav-container {
display: flex;
justify-content: space-around; /* Розподілення елементів з рівними проміжками */
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px 20px;
}
.nav-item:hover {
background-color: #575757;
}
<div class="nav-container">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</div>
10.4 Картки товарів
Створення макета карток товарів за допомогою Flexbox.
Приклад використання:
.product-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product-item {
flex: 1 1 calc(33.333% - 40px);
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-title {
font-size: 1.2em;
margin: 10px 0;
}
.product-price {
font-size: 1.5em;
color: #e74c3c;
}
<div class="product-list">
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">Товар 1</h3>
<p class="product-price">$99.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">Товар 2</h3>
<p class="product-price">$79.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">Товар 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
Пояснення коду:
.product-list: Flex-контейнер з підтримкою переносу рядків і проміжками між картками товарів.product-item: Flex-елементи (картки товарів) з фіксованою шириною, які автоматично адаптуються до розміру контейнера
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ