Bùi Tấn Lực - 24
- 13/10/2025
Bùi Tấn Lực Thuộc tính flex-wrap trong CSS 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính flex-wrap trong CSS
Chức năng của Thuộc tính flex-wrap trong CSS
Thuộc tính flex-wrap trong CSS 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.
Các giá trị của Thuộc tính flex-wrap trong CSS
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).
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).
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.
Code Thuộc tính flex-wrap trong CSS
<!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>
<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>
<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>
<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>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính flex-wrap 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 *
