Code Thuộc tính flex-direction trong CSS

Trình soạn thảo - Code Thuộc tính flex-direction trong CSS

Kết quả - Code Thuộc tính flex-direction trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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>