Thuộc tính flex-grow trong CSS
Bùi Tấn Lực - 830
- 13/10/2025
Chức năng của Thuộc tính flex-grow trong CSS
Thuộc tính flex-grow trong CSS dùng để lấy khoảng chiều rộng còn trống của phần tử cha chia cho các phần tử con, nếu các phần tử con có giá trị của thuộc tính flex-grow bằng nhau thì chiều rộng sẽ được chia bằng nhau, nếu có phần tử nào có giá trị lớn hơn thì sẽ được chia thêm 1 ít.
Cú pháp của Thuộc tính flex-grow trong CSS
flex-grow: giatri;
giatri: Giá trị của một trong các phần tử con (Ví dụ: 1, 2, 3, ....)
Code Thuộc tính flex-grow trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-grow trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{border:1px solid red; display: flex; width:100%; height:100px; margin-bottom:10px}
.divcha div {border:1px solid blue;}
</style>
</head>
<body>
<h1>Code Thuộc tính flex-grow trong CSS</h1>
<p>Dùng để lấy khoảng chiều rộng còn trống của phần tử cha chia cho các phần tử con, nếu các phần tử con có giá trị của thuộc tính flex-grow bằng nhau thì chiều rộng sẽ được chia bằng nhau, nếu có phần tử nào có giá trị lớn hơn thì sẽ được chia thêm 1 ít:</p>
<div class="divcha">
<div style="flex-grow: 1;">flex-grow: 1;</div>
<div style="flex-grow: 3;">flex-grow: 3;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
</div>
<div class="divcha">
<div style="flex-grow: 1;">flex-grow: 1;</div>
<div style="flex-grow: 2;">flex-grow: 2;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
</div>
<div class="divcha">
<div style="flex-grow: 2;">flex-grow: 2;</div>
<div style="flex-grow: 2;">flex-grow: 2;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
</div>
</body>
</html>
Cách sử dụng flex-grow trong CSS hiệu quả
flex-grow phát huy hiệu quả khi bố cục cần tự điều chỉnh theo phần không gian còn lại của container. Thay vì đặt chiều rộng cố định cho từng phần tử, bạn có thể dùng thuộc tính này để xác định phần tử nào được phép mở rộng và mở rộng với tỷ lệ bao nhiêu.
Chia không gian linh hoạt giữa các phần tử
Khi nhiều phần tử Flexbox cùng có khả năng mở rộng, giá trị flex-grow sẽ quyết định cách phân chia phần diện tích còn dư. Phần tử có giá trị càng lớn sẽ nhận được tỷ lệ không gian càng nhiều.
Chẳng hạn, ba phần tử có lần lượt flex-grow: 1, flex-grow: 2 và flex-grow: 1 sẽ chia phần không gian dư theo tỷ lệ 1:2:1. Phần tử ở giữa nhận gấp đôi phần không gian so với mỗi phần tử còn lại.
.container {
display: flex;
}
.item-1 {
flex-grow: 1;
}
.item-2 {
flex-grow: 2;
}
.item-3 {
flex-grow: 1;
}
Cách này phù hợp với các bố cục như thanh điều hướng, nhóm cột nội dung hoặc khu vực có các thành phần cần tự giãn theo kích thước màn hình. Khi container thay đổi chiều rộng, tỷ lệ phân chia vẫn được duy trì mà không cần tính lại kích thước bằng tay.
Kết hợp flex-grow với các thuộc tính Flexbox khác
flex-grow thường đạt hiệu quả tốt hơn khi được sử dụng cùng flex-basis và flex-shrink. Trong đó, flex-basis xác định kích thước cơ sở trước khi phân bổ không gian dư, còn flex-shrink kiểm soát khả năng thu nhỏ khi container không đủ diện tích.
Có thể thiết lập cả ba giá trị trong thuộc tính viết tắt flex để kiểm soát kích thước phần tử rõ ràng hơn:
.item {
flex: 1 1 200px;
}
Trong ví dụ trên, giá trị đầu tiên cho phép phần tử mở rộng, giá trị thứ hai cho phép thu nhỏ và 200px là kích thước cơ sở. Cách khai báo này giúp bố cục vừa tận dụng khoảng trống, vừa hạn chế tình trạng phần tử bị ép quá nhỏ khi diện tích hiển thị thay đổi.
Khi xây dựng giao diện thực tế, nên xác định kích thước cơ sở bằng flex-basis trước, sau đó dùng flex-grow để phân phối phần diện tích còn lại. Cách tiếp cận này giúp bố cục dễ kiểm soát và ổn định hơn so với việc chỉ dựa vào kích thước cố định.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính flex-grow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
