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:

Thuộc tính flex-flow trong CSS

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á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:

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 trá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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

Chạy Thử

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.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính flex-flow trong CSS
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn