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 cong
-
biện minh-nội dung
-
căn chỉnh các mục
-
căn chỉnh nội dung
Sau đây là đoạn mã hiển thị các bố cục linh hoạt bằng cách sử dụng CSS3 -
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,
.container2 > div,
.container3 > div,
.container4 > 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;
}
.container3 {
display: flex;
flex-direction: column;
background-color: rgb(168, 60, 10);
width: 200px;
align-items: center;
margin: 20px;
}
.container4 {
background-color: rgb(26, 10, 168);
width: 200px;
margin: 20px;
}
</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="container4">
<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 -
