Thuộc tính flex-direction trong CSS
Bùi Tấn Lực - 799
- 13/10/2025
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ú pháp của Thuộc tính flex-direction trong CSS
flex-direction: giatri;
giatri: Giá trị để canh các phần tử con theo một trong các hướng (Ví dụ: row-reverse, row, column, column-reverse)
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>
<p>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:</p>
<p>flex-direction: 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.</p>
<div class="divcha" style="flex-direction: row-reverse;">
<div>row-reverse(1)</div>
<div>row-reverse(2)</div>
<div>row-reverse(3)</div>
</div>
<p>flex-direction: 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.</p>
<div class ="divcha" style="flex-direction: row;">
<div>row(1)</div>
<div>row(2)</div>
<div>row(3)</div>
</div>
<p>flex-direction: 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.</p>
<div class ="divcha" style="flex-direction: column;">
<p>column(1)</p>
<p>column(2)</p>
<p>column(3)</p>
</div>
<p>flex-direction: 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.</p>
<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>
Khi nào nên sử dụng flex-direction trong CSS?
flex-direction nên được sử dụng khi cần kiểm soát hướng sắp xếp các phần tử bên trong một flex container. Thay vì thay đổi vị trí từng phần tử bằng margin hoặc position, thuộc tính này cho phép định hướng toàn bộ bố cục theo chiều ngang, chiều dọc hoặc đảo ngược thứ tự hiển thị.
Trong thực tế, lựa chọn giá trị phù hợp phụ thuộc vào cách nội dung được trình bày. Với danh sách liên kết, nhóm nút hoặc các thành phần nằm cạnh nhau, row thường là lựa chọn phù hợp. Khi xây dựng bố cục dạng cột, column sẽ dễ kiểm soát hơn.
Sắp xếp bố cục theo chiều ngang với flex-direction: row
flex-direction: row phù hợp khi các phần tử cần nằm nối tiếp nhau theo chiều ngang. Đây cũng là lựa chọn hữu ích cho menu, nhóm nút, thanh công cụ hoặc các khu vực có nhiều thành phần cần đặt cạnh nhau.
Khi sử dụng giá trị này, các phần tử được sắp xếp từ đầu đến cuối theo trục chính nằm ngang. Có thể kết hợp thêm justify-content và align-items để kiểm soát khoảng cách và vị trí của chúng.
.menu {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Cách triển khai này giúp bố cục dễ điều chỉnh khi số lượng phần tử thay đổi, đồng thời thuận tiện khi xây dựng giao diện responsive.
Chuyển bố cục sang chiều dọc với flex-direction: column
Khi các thành phần cần xếp từ trên xuống dưới, flex-direction: column là lựa chọn trực tiếp và dễ kiểm soát. Giá trị này thường phù hợp với danh sách thông tin, biểu mẫu, nhóm nội dung hoặc giao diện trên màn hình nhỏ.
Ví dụ, một khu vực chứa tiêu đề, đoạn mô tả và nút hành động có thể chuyển thành bố cục dọc mà không cần thay đổi cấu trúc HTML.
.box {
display: flex;
flex-direction: column;
gap: 12px;
}
Đặc biệt, column rất hữu ích trong responsive. Một nhóm phần tử đang nằm ngang trên màn hình lớn có thể chuyển sang dạng dọc ở kích thước nhỏ hơn chỉ bằng cách thay đổi hướng flex.
Đảo ngược thứ tự phần tử với flex-direction: row-reverse và column-reverse
Các giá trị row-reverse và column-reverse dùng khi cần đảo thứ tự hiển thị của các phần tử mà không phải thay đổi thứ tự chúng xuất hiện trong HTML. row-reverse đảo hướng sắp xếp theo chiều ngang, còn column-reverse đảo hướng theo chiều dọc.
.actions {
display: flex;
flex-direction: row-reverse;
}
Cách này hữu ích khi cần thay đổi cách trình bày giao diện trong một số trạng thái cụ thể. Tuy nhiên, không nên lạm dụng việc đảo thứ tự chỉ để sửa bố cục, bởi thứ tự trong HTML vẫn ảnh hưởng đến khả năng đọc nội dung và trải nghiệm với các công cụ hỗ trợ.
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 *
