CSS3 cung cấp một chế độ bố trí Hộp linh hoạt, thường được gọi là Flexbox. Flexbox (hộp linh hoạt) là một chế độ bố trí của CSS3. Sử dụng chế độ này, bạn có thể dễ dàng tạo bố cục cho các ứng dụng và trang web phức tạp. Nó bao gồm vùng chứa, các mục linh hoạt, v.v. Vùng chứa có các thuộc tính sau -
-
hướng uốn
-
bọc uốn
-
uốn dẻo
-
biện minh-nội dung
-
căn chỉnh các mục
-
căn chỉnh nội dung
Sau đây là mã cho bố cục CSS nâng cao với flexbox -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: lightblue;
}
.container1 {
align-self: flex-start;
display: flex;
background-color: rgb(71, 30, 255);
width: 200px;
margin: 20px;
}
.container1 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
.container2 {
display: flex;
background-color: rgb(14, 126, 79);
width: 200px;
justify-content: center;
align-self: flex-start;
margin: 20px;
}
.container2 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
.container3 {
display: flex;
flex-direction: column;
background-color: rgb(168, 60, 10);
width: 200px;
align-items: center;
margin: 20px;
}
.container3 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
width: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flex layout example</h1>
<div class="container">
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
