10.1 Cột linh hoạt
Flexbox chuyên cho bố trí một chiều, có nghĩa là nó hoàn hảo để sắp xếp các phần tử trong dòng hoặc cột. Hãy xem xét các nguyên tắc cơ bản của Flexbox, cũng như các kỹ thuật để tạo ra bố cục phức tạp và linh hoạt.
Flex-container và Flex-item
- Flex-container: phần tử mà bạn áp dụng thuộc tính
display: flex. Container này quản lý vị trí của tất cả các phần tử con (flex-item) - Flex-item: các phần tử con của flex-container
1. Tạo cột linh hoạt
Ví dụ về tạo cột linh hoạt bằng cách sử dụng flex-wrap, flex-grow, flex-shrink và 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>Cột linh hoạt với Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">Cột 1</div>
<div class="flex-item">Cột 2</div>
<div class="flex-item">Cột 3</div>
</div>
</body>
</html>
Giải thích mã:
-
.flex-container: xác định container là flex-container với các phần tử có thể chuyển sang hàng tiếp theo khi không đủ chỗ (flex-wrap: wrap) -
.flex-item: các phần tử có kích thước bằng nhau và có thể thích ứng với không gian có sẵn (flex: 1 1 200px)
10.2 Thư viện hình ảnh linh hoạt
Tạo một thư viện hình ảnh linh hoạt, thay đổi số lượng cột tùy thuộc vào kích thước màn hình:
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.codegym.cc/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.codegym.cc/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.codegym.cc/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.codegym.cc/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.codegym.cc/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 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="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
</body>
</html>
Giải thích:
- Trên màn hình lớn, hình ảnh chiếm một phần ba chiều rộng của container
- Trên màn hình rộng tối đa 768 pixel, hình ảnh chiếm một nửa chiều rộng container
- Trên màn hình rộng tối đa 480 pixel, hình ảnh chiếm toàn bộ chiều rộng container
10.3 Bố cục phức tạp linh hoạt với Flexbox
Tạo một bố cục phức tạp sử dụng Flexbox, bao gồm header, sidebar, nội dung chính và footer, thích ứng với các kích thước màn hình khác nhau:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Flexbox Layout</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
aside {
background-color: #ccc;
padding: 20px;
}
@media (min-width: 768px) {
main {
flex-direction: row;
}
.content {
flex: 3;
}
aside {
flex: 1;
}
}
</style>
</head>
<body>
<header>Header</header>
<main>
<aside>Sidebar</aside>
<div class="content">Main Content</div>
</main>
<footer>Footer</footer>
</body>
</html>
Giải thích:
- Trên màn hình nhỏ, bố cục bao gồm header, nội dung chính, sidebar và footer được sắp xếp theo chiều dọc
- Trên màn hình rộng từ 768 pixel trở lên, nội dung chính và sidebar được sắp xếp theo chiều ngang
GO TO FULL VERSION