Bùi Tấn Lực - 128
- 13/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
