Thuộc tính flex-flow trong CSS
Bùi Tấn Lực - 812
- 13/10/2025
Chức năng của Thuộc tính flex-flow trong CSS
Thuộc tính flex-flow trong CSS dùng để kết hợp 2 giá trị với nhau để sắp xếp các phần tử con và các hàng theo thứ tự phải qua trái, trái qua phải, dưới lên trên, trên xuống dưới.
Cú pháp của Thuộc tính flex-flow trong CSS
Nhóm 1: row, row-reverse, column, column-reverse.
Nhóm 2: nowrap, wrap, wrap-reverse
flex-flow: giatri1 giatri2;
Nếu giatri1 dùng Nhóm 1 thì giatri2 dùng Nhóm 2 hoặc ngược lại.
Các giá trị của Thuộc tính flex-flow trong CSS
row nowrap: Các phần tử con đều nằm trên cùng một hàng mặc dù có nhiều phần tử con, nếu nhiều phần tử con thì chiều rộng của mỗi phần tử sẽ thu nhỏ lại, các phần tử con được sắp xếp theo thứ tự từ trái qua phải.
row-reverse nowrap: Các phần tử con được sắp xếp theo thứ tự từ phải qua trái, các phần tử con đều nằm trên cùng một hàng mặc dù có nhiều phần tử con, nếu nhiều phần tử con thì chiều rộng của mỗi phần tử sẽ thu nhỏ lại.
column nowrap: Canh các phần tử con từ trên xuống dưới, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.
column-reverse nowrap: Canh các phần tử con từ dưới lên trên, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.
row wrap: Các phần tử con được sắp xếp theo trình tự: trái qua phải, từ trên xuống dưới, hàng đầu tiên nằm sát cạnh trên, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh dưới phần tử cha cũng có khoảng trống đều).
row-reverse wrap: Các phần tử con được sắp xếp theo trình tự: phải qua trái, từ trên xuống dưới, hàng đầu tiên nằm sát cạnh trên, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh dưới phần tử cha cũng có khoảng trống đều).
column wrap: Canh các phần tử con từ trên xuống dưới, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.
column-reverse wrap: Canh các phần tử con từ dưới lên trên, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.
row wrap-reverse: Các phần tử con được sắp xếp theo trình tự: từ dưới lên trên, từ trái qua phải, hàng đầu tiên nằm sát cạnh dưới, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh trên phần tử cha cũng có khoảng trống đều).
row-reverse wrap-reverse: Các phần tử con được sắp xếp theo trình tự: từ dưới lên trên, từ phải qua trái, hàng đầu tiên nằm sát cạnh dưới, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh trên phần tử cha cũng có khoảng trống đều).
column wrap-reverse: Canh các phần tử con từ trên xuống dưới, các phần tử canh phải, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.
column-reverse wrap-reverse: Canh các phần tử con từ dưới lên trên, các phần tử canh phải, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.
Code Thuộc tính flex-flow trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-flow 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; min-height:100px; height:auto; margin-bottom:10px; background:#ddd}
.divcha div {border:1px solid blue;width:180px;height:30px}
.divcha p {border:1px solid blue;}
</style>
</head>
<body>
<h1>Code Thuộc tính flex-flow trong CSS</h1>
<p>Dùng để kết hợp 2 giá trị với nhau để sắp xếp các phần tử con và các hàng theo thứ tự phải qua trái, trái qua phải, dưới lên trên, trên xuống dưới:</p>
<p>flex-flow: row nowrap; Các phần tử con đều nằm trên cùng một hàng mặc dù có nhiều phần tử con, nếu nhiều phần tử con thì chiều rộng của mỗi phần tử sẽ thu nhỏ lại, các phần tử con được sắp xếp theo thứ tự từ trái qua phải.</p>
<div class="divcha" style="flex-flow: row nowrap;">
<div>row nowrap;(1)</div>
<div>row nowrap;(2)</div>
<div>row nowrap;(3)</div>
<div>row nowrap;(4)</div>
<div>row nowrap;(5)</div>
<div>row nowrap;(6)</div>
<div>row nowrap;(7)</div>
</div>
<p>flex-flow: row-reverse nowrap; Các phần tử con được sắp xếp theo thứ tự từ phải qua trái, các phần tử con đều nằm trên cùng một hàng mặc dù có nhiều phần tử con, nếu nhiều phần tử con thì chiều rộng của mỗi phần tử sẽ thu nhỏ lại.</p>
<div class="divcha" style="flex-flow: row-reverse nowrap;">
<div>row-reverse nowrap;(1)</div>
<div>row-reverse nowrap;(2)</div>
<div>row-reverse nowrap;(3)</div>
<div>row-reverse nowrap;(4)</div>
<div>row-reverse nowrap;(5)</div>
<div>row-reverse nowrap;(6)</div>
<div>row-reverse nowrap;(7)</div>
</div>
<p>flex-flow: column nowrap; Canh các phần tử con từ trên xuống dưới, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.</p>
<div class="divcha" style="flex-flow: column nowrap;">
<div>column nowrap;(1)</div>
<div>column nowrap;(2)</div>
<div>column nowrap;(3)</div>
<div>column nowrap;(4)</div>
<div>column nowrap;(5)</div>
<div>column nowrap;(6)</div>
</div>
<p>flex-flow: column-reverse nowrap; Canh các phần tử con từ dưới lên trên, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.</p>
<div class="divcha" style="flex-flow: column-reverse nowrap;">
<div>column-reverse nowrap;(1)</div>
<div>column-reverse nowrap;(2)</div>
<div>column-reverse nowrap;(3)</div>
<div>column-reverse nowrap;(4)</div>
<div>column-reverse nowrap;(5)</div>
<div>column-reverse nowrap;(6)</div>
</div>
<p>flex-flow: row wrap; Các phần tử con được sắp xếp theo trình tự: trái qua phải, từ trên xuống dưới, hàng đầu tiên nằm sát cạnh trên, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh dưới phần tử cha cũng có khoảng trống đều).</p>
<div class="divcha" style="flex-flow: row wrap;">
<div>row wrap;(1)</div>
<div>row wrap;(2)</div>
<div>row wrap;(3)</div>
<div>row wrap;(4)</div>
<div>row wrap;(5)</div>
<div>row wrap;(6)</div>
</div>
<p>flex-flow: row-reverse wrap; Các phần tử con được sắp xếp theo trình tự: phải qua trái, từ trên xuống dưới, hàng đầu tiên nằm sát cạnh trên, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh dưới phần tử cha cũng có khoảng trống đều).</p>
<div class="divcha" style="flex-flow: row-reverse wrap;">
<div>row-reverse wrap;(1)</div>
<div>row-reverse wrap;(2)</div>
<div>row-reverse wrap;(3)</div>
<div>row-reverse wrap;(4)</div>
<div>row-reverse wrap;(5)</div>
<div>row-reverse wrap;(6)</div>
</div>
<p>flex-flow: column wrap; Canh các phần tử con từ trên xuống dưới, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.</p>
<div class="divcha" style="flex-flow: column wrap;">
<div>column wrap;(1)</div>
<div>column wrap;(2)</div>
<div>column wrap;(3)</div>
<div>column wrap;(4)</div>
<div>column wrap;(5)</div>
<div>column wrap;(6)</div>
</div>
<p>flex-flow: column-reverse wrap; Canh các phần tử con từ dưới lên trên, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.</p>
<div class="divcha" style="flex-flow: column-reverse wrap;">
<div>column-reverse wrap;(1)</div>
<div>column-reverse wrap;(2)</div>
<div>column-reverse wrap;(3)</div>
<div>column-reverse wrap;(4)</div>
<div>column-reverse wrap;(5)</div>
<div>column-reverse wrap;(6)</div>
</div>
<p>flex-flow: row wrap-reverse; Các phần tử con được sắp xếp theo trình tự: từ dưới lên trên, từ trái qua phải, hàng đầu tiên nằm sát cạnh dưới, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh trên phần tử cha cũng có khoảng trống đều).</p>
<div class="divcha" style="flex-flow: row wrap-reverse;">
<div>row wrap-reverse;(1)</div>
<div>row wrap-reverse;(2)</div>
<div>row wrap-reverse;(3)</div>
<div>row wrap-reverse;(4)</div>
<div>row wrap-reverse;(5)</div>
<div>row wrap-reverse;(6)</div>
</div>
<p>flex-flow: row-reverse wrap-reverse; Các phần tử con được sắp xếp theo trình tự: từ dưới lên trên, từ phải qua trái, hàng đầu tiên nằm sát cạnh dưới, nếu chiều cao phần tử cha còn trống thì mỗi hàng cách đều nhau một khoảng trống (ngay cả cạnh trên phần tử cha cũng có khoảng trống đều).</p>
<div class="divcha" style="flex-flow: row-reverse wrap-reverse;">
<div>row-reverse wrap-reverse;(1)</div>
<div>row-reverse wrap-reverse;(2)</div>
<div>row-reverse wrap-reverse;(3)</div>
<div>row-reverse wrap-reverse;(4)</div>
<div>row-reverse wrap-reverse;(5)</div>
<div>row-reverse wrap-reverse;(6)</div>
</div>
<p>flex-flow: column wrap-reverse; Canh các phần tử con từ trên xuống dưới, các phần tử canh phải, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.</p>
<div class="divcha" style="flex-flow: column wrap-reverse;">
<div>column wrap-reverse;(1)</div>
<div>column wrap-reverse;(2)</div>
<div>column wrap-reverse;(3)</div>
<div>column wrap-reverse;(4)</div>
<div>column wrap-reverse;(5)</div>
<div>column wrap-reverse;(6)</div>
</div>
<p>flex-flow: column-reverse wrap-reverse; Canh các phần tử con từ dưới lên trên, các phần tử canh phải, mỗi phần tử con là 1 hàng, nếu chiều rộng của phần tử con không quy định thì sẽ full chiều rộng theo phần tử cha.</p>
<div class="divcha" style="flex-flow: column-reverse wrap-reverse;">
<div style="width:250px">column-reverse wrap-reverse;(1)</div>
<div style="width:250px">column-reverse wrap-reverse;(2)</div>
<div style="width:250px">column-reverse wrap-reverse;(3)</div>
<div style="width:250px">column-reverse wrap-reverse;(4)</div>
<div style="width:250px">column-reverse wrap-reverse;(5)</div>
<div style="width:250px">column-reverse wrap-reverse;(6)</div>
</div>
</body>
</html>
Ứng dụng Thuộc tính flex-flow trong CSS vào bố cục thực tế
Trong giao diện thực tế, flex-flow giúp thiết lập nhanh hướng sắp xếp và cách các phần tử chuyển sang dòng mới trong một khai báo. Thay vì cấu hình riêng flex-direction và flex-wrap, bạn có thể kết hợp cả hai để kiểm soát bố cục ngắn gọn và dễ quản lý hơn.
Tạo bố cục linh hoạt cho danh sách sản phẩm
Với danh sách sản phẩm, flex-flow có thể được dùng để sắp xếp các sản phẩm theo hàng ngang và cho phép chúng tự động xuống dòng khi không còn đủ không gian. Cách này đặc biệt phù hợp với các khu vực có số lượng sản phẩm thay đổi.
.product-list {
display: flex;
flex-flow: row wrap;
}
Khi sử dụng row wrap, các phần tử con được ưu tiên xếp từ trái sang phải. Nếu chiều rộng của vùng chứa không đủ, những phần tử còn lại sẽ chuyển xuống dòng tiếp theo thay vì bị ép vào cùng một hàng.
Kết hợp flex-flow với thiết kế responsive
flex-flow phát huy hiệu quả khi xây dựng giao diện responsive vì bố cục có thể thay đổi theo không gian hiển thị. Chẳng hạn, danh sách có thể giữ dạng hàng ngang trên màn hình rộng và chuyển sang dạng cột khi màn hình nhỏ hơn.
.content {
display: flex;
flex-flow: row wrap;
}
@media (max-width: 768px) {
.content {
flex-flow: column nowrap;
}
}
Cách tổ chức này giúp CSS rõ ràng hơn và hạn chế việc phải khai báo nhiều thuộc tính riêng lẻ. Khi cần điều chỉnh bố cục ở từng kích thước màn hình, bạn chỉ cần thay đổi giá trị của flex-flow phù hợp với không gian thực tế.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính flex-flow 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 *
