Thuộc tính column-fill trong CSS
Bùi Tấn Lực - 820
- 16/10/2025
Chức năng của Thuộc tính column-fill trong CSS
Thuộc tính column-fill trong CSS dùng để quy định cách nội dung hiển thị trên các cột, thuộc tính này hoạt động khi cố định chiều cao và có chia cột.
Cú pháp của Thuộc tính column-fill trong CSS
column-fill: giatri;
giatri: Giá trị quy định cách nội dung hiển thị trên các cột, thuộc tính này hoạt động khi cố định chiều cao và có chia cột (balance, auto)
Các giá trị của Thuộc tính column-fill trong CSS
balance: Nội dung trải gần đều cho các cột.
auto: Nội dung đầy ở các cột đầu tiên thì mới đổ nội dung tới cột tiếp theo.
Code Thuộc tính column-fill trong CSS
column-fill: balance; nội dung trải gần đều cho các cột
column-fill: auto; Nội dung đầy ở các cột đầu tiên thì mới đổ nội dung tới cột tiếp theo
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-fill trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{width:100%; margin-bottom:10px; column-count: 3; height: 150px;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-fill trong CSS</h1>
<p>Dùng để quy định cách nội dung hiển thị trên các cột, thuộc tính này hoạt động khi cố định chiều cao và có chia cột:</p>
<h4>column-fill: balance; nội dung trải gần đều cho các cột</h4>
<div class="divcha" style="column-fill: balance;">
Hãy Chạy thử Code Thuộc tính column-fill trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả. Hãy Chạy thử Code Thuộc tính column-fill trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả. Hãy Chạy thử Code Thuộc tính column-fill trong CSS
</div>
<h4>column-fill: auto; Nội dung đầy ở các cột đầu tiên thì mới đổ nội dung tới cột tiếp theo</h4>
<div class="divcha" style="column-fill: auto;">
Hãy Chạy thử Code Thuộc tính column-fill trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả. Hãy Chạy thử Code Thuộc tính column-fill trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả. Hãy Chạy thử Code Thuộc tính column-fill trong CSS
</div>
</body>
</html>
Khi nào nên sử dụng column-fill trong CSS?
column-fill phù hợp khi nội dung được trình bày theo nhiều cột và bạn muốn kiểm soát cách trình duyệt phân bổ nội dung giữa các cột. Việc chọn giá trị phù hợp sẽ giúp bố cục dễ đọc hơn, đặc biệt với văn bản dài.
Chọn column-fill: balance khi muốn các cột cân đối
Giá trị balance phù hợp khi mục tiêu là chia nội dung tương đối đều giữa các cột. Trình duyệt sẽ cố gắng phân phối chiều cao nội dung để các cột có độ dài gần nhau, tạo cảm giác gọn gàng và cân đối.
Cách này thích hợp với các khối bài viết, danh sách thông tin hoặc nội dung nhiều đoạn văn cần giữ bố cục đồng đều giữa các cột.
.noidung {
column-count: 3;
column-fill: balance;
}
Chọn column-fill: auto khi cần kiểm soát luồng nội dung
auto phù hợp khi bạn muốn nội dung được lấp đầy từng cột theo chiều cao đã xác định trước, thay vì ưu tiên chia đều tổng lượng nội dung. Khi một cột đạt giới hạn, nội dung sẽ tiếp tục chuyển sang cột kế tiếp.
Giá trị này hữu ích khi bố cục yêu cầu chiều cao cột cụ thể, chẳng hạn một khu vực nội dung có kích thước cố định và cần duy trì cách phân bổ theo chiều dọc.
.noidung {
column-count: 3;
height: 300px;
column-fill: auto;
}
Những trường hợp column-fill không tạo ra kết quả như mong đợi
Kết quả của column-fill không chỉ phụ thuộc vào số lượng cột mà còn liên quan đến chiều cao của vùng chứa và lượng nội dung. Nếu phần tử không có giới hạn chiều cao phù hợp, sự khác biệt giữa các giá trị có thể không rõ ràng.
Khi kiểm tra bố cục, nên xem đồng thời column-count, column-width và kích thước của phần tử chứa. Nếu nội dung vẫn không được phân bổ như mong muốn, nguyên nhân có thể nằm ở chính cấu trúc cột thay vì riêng thuộc tính column-fill.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-fill 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 *
