10.1 Mạng đơn giản
Flexbox cho phép tạo ra các bố cục linh hoạt và thích ứng. Bây giờ chúng ta sẽ thử một vài ví dụ sử dụng Flexbox để tạo ra các bố cục khác nhau, bao gồm mạng đơn giản, căn giữa các phần tử, tạo menu điều hướng và thẻ sản phẩm.
Tạo một mạng đơn giản bằng Flexbox. Ví dụ này cho thấy cách dễ dàng để tạo ra các phần tử được phân bố đều trong một container.
Ví dụ sử dụng:
.flex-container {
display: flex;
flex-wrap: wrap; /* Cho phép các phần tử được di chuyển sang dòng mới */
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); /* Phân phối không gian linh hoạt */
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): xác định kích thước ban đầu của phần tử trước khi bất kỳ việc giãn hoặc thu nhỏ nào được áp dụng. Trong trường hợp này, phần tử sẽ chiếm 33.333% chiều rộng của container trừ đi 40 pixel. calc() cho phép thực hiện các tính toán trực tiếp trong CSS.
10.2 Căn giữa các phần tử
Căn giữa các phần tử theo chiều ngang và chiều dọc trong một container bằng Flexbox.
Ví dụ sử dụng:
.flex-container {
display: flex;
justify-content: center; /* Căn giữa theo chiều ngang */
align-items: center; /* Căn giữa theo chiều dọc */
height: 100vh; /* Chiều cao container là toàn màn hình */
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 Menu điều hướng
Tạo menu điều hướng ngang bằng Flexbox.
Ví dụ sử dụng:
.nav-container {
display: flex;
justify-content: space-around; /* Phân phối các phần tử với khoảng cách bằng nhau */
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 Thẻ sản phẩm
Tạo bố cục thẻ sản phẩm bằng Flexbox.
Ví dụ sử dụng:
.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">Sản phẩm 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">Sản phẩm 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">Sản phẩm 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
Giải thích mã:
.product-list: Container Flex hỗ trợ chuyển dòng và có khoảng cách giữa các thẻ sản phẩm.product-item: Các phần tử Flex (thẻ sản phẩm) có chiều rộng cố định, tự động thích ứng với kích thước container
GO TO FULL VERSION