CSS Flexbox, hay còn gọi là Flexible Box Layout, là một mô hình bố cục mạnh mẽ và linh hoạt được thiết kế để giúp các nhà phát triển web dễ dàng sắp xếp các phần tử giao diện người dùng, đặc biệt là khi kích thước của các phần tử đó hoặc kích thước của container chứa chúng có thể thay đổi động. Được giới thiệu trong CSS3, Flexbox đã giải quyết nhiều vấn đề mà các nhà phát triển gặp phải khi sử dụng các mô hình bố cục truyền thống như block hoặc inline.
Khái Niệm Cơ Bản
Flexbox cho phép bạn phân phối không gian xung quanh các mục trong một container và căn chỉnh chúng theo cách mà các mô hình bố cục truyền thống không thể làm được. Nó hoạt động theo một chiều, có nghĩa là bạn có thể chọn một hướng (ngang hoặc dọc) để sắp xếp các mục con trong container.
Các Thuộc Tính Chính của Flexbox
Flexbox bao gồm các thuộc tính cho cả container (flex container) và các mục con (flex items). Dưới đây là một số thuộc tính quan trọng:
Thuộc Tính của Flex Container
- display: Để thiết lập một container sử dụng Flexbox, bạn cần đặt giá trị của thuộc tính
displaylàflexhoặcinline-flex. - flex-direction: Xác định hướng chính của container, có thể là
row,row-reverse,column, hoặccolumn-reverse. - justify-content: Căn chỉnh các flex items theo trục chính (main axis). Các giá trị có thể là
flex-start,flex-end,center,space-between,space-around, hoặcspace-evenly. - align-items: Căn chỉnh các items theo trục phụ (cross axis). Các giá trị có thể là
stretch,center,flex-start,flex-end, vàbaseline. - flex-wrap: Cho phép các items bọc sang hàng mới nếu không có đủ không gian. Các giá trị có thể là
nowrap,wrap, hoặcwrap-reverse. - align-content: Căn chỉnh các dòng trong flex container khi có nhiều hơn một dòng, tương tự như
justify-contentnhưng cho nhiều dòng.
Thuộc Tính của Flex Items
- flex-grow: Xác định khả năng một item có thể phát triển để lấp đầy không gian thừa. Một giá trị là một số không âm.
- flex-shrink: Xác định khả năng một item có thể co lại khi không đủ không gian. Một giá trị là một số không âm.
- flex-basis: Xác định kích thước mặc định của một item trước khi không gian phân phối thừa hoặc thiếu được tính toán.
- align-self: Cho phép mỗi item có thể ghi đè thuộc tính
align-itemscủa container cho chính nó.
Ví Dụ Minh Họa
Giả sử bạn muốn tạo một thanh điều hướng ngang với các liên kết được phân bổ đều trên toàn bộ chiều rộng của container. Dưới đây là cách bạn có thể làm điều đó sử dụng Flexbox:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thanh điều hướng Flexbox</title>
<style>
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
height: 50px;
background-color: #333;
}
.nav-link {
color: white;
text-decoration: none;
font-size: 16px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Services</a>
<a href="#" class="nav-link">Contact</a>
</div>
</body>
</html>Trong ví dụ này, .navbar là flex container và các <a> là flex items. Thuộc tính justify-content: space-around đảm bảo rằng các liên kết được phân bổ đều trên toàn bộ chiều rộng của container.
Kết Luận
Flexbox là một công cụ mạnh mẽ cho phép bạn xử lý các vấn đề bố cục phức tạp một cách dễ dàng và hiệu quả. Với sự linh hoạt và dễ sử dụng của nó, Flexbox đã trở thành một trong những công cụ không thể thiếu trong bộ công cụ của nhà phát triển web hiện đại.
