Thuộc tính flex-basis trong CSS
Bùi Tấn Lực - 830
- 13/10/2025
Chức năng của Thuộc tính flex-basis trong CSS
Thuộc tính flex-basis trong CSS dùng để quy định chiều rộng của một phần tử con, thuộc tính này sử dụng kèm với giá trị flex của thuộc tính display cho phần tử HTML cha.
Cú pháp của Thuộc tính flex-basis trong CSS
flex-basis: giatri;
giatri: Giá trị để quy định chiều rộng của một phần tử con (Ví dụ: 100px, 50px, 50%, ...)
Code Thuộc tính flex-basis trong CSS
flex-basis: 50%;
flex-basis: 100px;
flex-basis: 50px;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-basis 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-basis trong CSS</h1>
<p>Dùng để quy định chiều rộng của một phần tử con, thuộc tính này sử dụng kèm với giá trị flex của thuộc tính display cho phần tử HTML cha:</p>
<div class="divcha">
<div style="flex-basis: 50%;">flex-basis: 50%;</div>
<div style="flex-basis: 100px;">flex-basis: 100px;</div>
<div style="flex-basis: 100px;">flex-basis: 100px;</div>
<div style="flex-basis: 50px;">flex-basis: 50px;</div>
</div>
<div class="divcha">
<div style="flex-basis: 50px;">flex-basis: 50px;</div>
<div style="flex-basis: 100px;">flex-basis: 100px;</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-basis: 70px;">flex-basis: 70px;</div>
<div style="flex-grow: 1;">flex-grow: 1;</div>
<div style="flex-grow: 2;">flex-grow: 2;</div>
</div>
</body>
</html>
Ứng dụng flex-basis trong bố cục Flexbox
Thuộc tính flex-basis phát huy hiệu quả khi cần kiểm soát kích thước cơ sở của phần tử trước khi Flexbox phân bổ khoảng trống còn lại. Thay vì đặt kích thước cố định cho từng phần tử, có thể dùng giá trị theo tỷ lệ hoặc kích thước linh hoạt để bố cục dễ thích nghi hơn.
Cách sử dụng phù hợp là xác định kích thước cơ sở cho từng nhóm nội dung, sau đó kết hợp với các thuộc tính Flexbox khác để trình duyệt tự điều chỉnh khi không gian thay đổi.
Chia tỷ lệ chiều rộng các phần tử bằng flex-basis
Trong một hàng Flexbox, flex-basis có thể được dùng để thiết lập kích thước ban đầu cho từng phần tử. Khi đặt giá trị theo phần trăm, chiều rộng cơ sở sẽ được tính dựa trên kích thước của vùng chứa, phù hợp với các bố cục chia cột.
Ví dụ, vùng nội dung có ba phần tử với tỷ lệ khác nhau:
.box-1 {
flex-basis: 50%;
}
.box-2 {
flex-basis: 30%;
}
.box-3 {
flex-basis: 20%;
}
Cách này giúp phân chia không gian theo tỷ lệ rõ ràng mà không cần đặt chiều rộng riêng bằng width. Tuy nhiên, tổng kích thước cơ sở và các khoảng cách như gap, padding hoặc border cần được tính đến để tránh làm bố cục vượt quá không gian chứa.
Kết hợp flex-basis với flex-grow và flex-shrink
flex-basis xác định kích thước cơ sở, còn flex-grow và flex-shrink quyết định cách phần tử phản ứng khi không gian thay đổi. Khi sử dụng cùng nhau, ba thuộc tính này giúp kiểm soát quá trình phân bổ kích thước linh hoạt hơn.
Chẳng hạn, có thể đặt một phần tử làm vùng nội dung chính và cho phép nó nhận thêm không gian, trong khi các phần tử phụ giữ kích thước cơ sở:
.content {
flex: 1 1 600px;
}
.sidebar {
flex: 0 1 280px;
}
Trong ví dụ trên, giá trị 600px và 280px là kích thước cơ sở. Phần nội dung có thể mở rộng để tận dụng khoảng trống, đồng thời cả hai phần tử vẫn có khả năng thu nhỏ khi vùng chứa không đủ rộng. Đây là cách thiết lập hữu ích cho các bố cục như nội dung chính kết hợp thanh bên mà không phải phụ thuộc hoàn toàn 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-basis 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 *
