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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!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>
Code Thuộc tính flex-flow trong CSS nằm trong bài viết Thuộc tính flex-flow trong CSS