CSS3 cung cấp chế độ bố cục Flexible Box, thường gọi là Flexbox. Flexbox (hộp linh hoạt) là một chế độ bố cục 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 container, flex items, v.v. Container có các thuộc tính sau:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Dưới đâ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>
Kết quả
Mã trên cho kết quả sau:
