Bùi Tấn Lực - 24
- 13/10/2025
Bùi Tấn Lực Thuộc tính flex-direction trong CSS dùng để canh các phần tử con theo hướng từ trái qua phải, từ trên xuống dưới, từ dưới lên trên, từ phải qua trái, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính flex-direction trong CSS
Chức năng của Thuộc tính flex-direction trong CSS
Thuộc tính flex-direction trong CSS dùng để canh các phần tử con theo hướng từ trái qua phải, từ trên xuống dưới, từ dưới lên trên, từ phải qua trái, thuộc tính này kết hợp với giá trị flex trong thuộc tính display.
Các giá trị của Thuộc tính flex-direction trong CSS
row-reverse: Canh các phần tử con từ phải qua trái, nằm trên 1 hàng, nếu không quy định chiều cao của phần tử con thì sẽ full chiều cao theo phần tử cha.
row: Canh các phần tử con từ trái qua phải, nằm trên 1 hàng, nếu không quy định chiều cao của phần tử con thì sẽ full chiều cao theo phần tử cha.
column: Canh các phần tử con từ trên xuống dưới, mỗi phần tử con là 1 hàng, canh đều khoảng cách ở giữa của các phần tử con theo chiều dọc, khoảng cách góc trên và góc dưới bằng nhau và nhỏ hơn khoảng cách giữa, 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: Canh các phần tử con từ dưới lên trên, mỗi phần tử con là 1 hàng, canh đều khoảng cách ở giữa của các phần tử con theo chiều dọc, khoảng cách góc trên và góc dưới bằng nhau và nhỏ hơn khoảng cách giữa, 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-direction trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-direction 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:50px; height:auto; margin-bottom:10px}
.divcha div {border:1px solid blue;width:150px;height:30px}
.divcha p {border:1px solid blue;}
</style>
</head>
<body>
<h1>Code Thuộc tính flex-direction trong CSS</h1>
<div class="divcha" style="flex-direction: row-reverse;">
<div>row-reverse(1)</div>
<div>row-reverse(2)</div>
<div>row-reverse(3)</div>
</div>
<div class ="divcha" style="flex-direction: row;">
<div>row(1)</div>
<div>row(2)</div>
<div>row(3)</div>
</div>
<div class ="divcha" style="flex-direction: column;">
<p>column(1)</p>
<p>column(2)</p>
<p>column(3)</p>
</div>
<div class ="divcha" style="flex-direction: column-reverse;">
<p>column-reverse(1)</p>
<p>column-reverse(2)</p>
<p>column-reverse(3)</p>
</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-direction 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 *
