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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-wrap 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:100px; margin-bottom:10px}
.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-wrap trong CSS</h1>

<p>Dùng để sắp xếp các phần tử con vào các hàng theo thứ tự khác nhau và cách hiển thị cũng khác nhau, thuộc tính này kết hợp với giá trị flex của thuộc tính display:</p>

<p>flex-wrap: 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-wrap: wrap;">
	<div>flex-wrap: wrap;(1)</div>
    <div>flex-wrap: wrap;(2)</div>
    <div>flex-wrap: wrap;(3)</div>
    <div>flex-wrap: wrap;(4)</div>
    <div>flex-wrap: wrap;(5)</div>
    <div>flex-wrap: wrap;(6)</div>
</div>

<p>flex-wrap: 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-wrap: nowrap;">
	<div>flex-wrap: nowrap;(1)</div>
    <div>flex-wrap: nowrap;(2)</div>
    <div>flex-wrap: nowrap;(3)</div>
    <div>flex-wrap: nowrap;(4)</div>
    <div>flex-wrap: nowrap;(5)</div>
    <div>flex-wrap: nowrap;(6)</div>
</div>

<p>flex-wrap: 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-wrap: wrap-reverse;">
	<div>flex-wrap: wrap-reverse;(1)</div>
    <div>flex-wrap: wrap-reverse;(2)</div>
    <div>flex-wrap: wrap-reverse;(3)</div>
    <div>flex-wrap: wrap-reverse;(4)</div>
    <div>flex-wrap: wrap-reverse;(5)</div>
    <div>flex-wrap: wrap-reverse;(6)</div>
</div>

</body>
</html>
Code Thuộc tính flex-wrap trong CSS nằm trong bài viết Thuộc tính flex-wrap trong CSS