Thuộc tính flex-wrap trong CSS
Bùi Tấn Lực - 847
- 13/10/2025
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ú pháp của Thuộc tính flex-wrap trong CSS
flex-wrap: giatri;
giatri: Giá trị để 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 (Ví dụ: wrap, nowrap, wrap-reverse)
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>
<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>
Ứng dụng thuộc tính flex-wrap trong thiết kế website
Trong thực tế, flex-wrap phát huy hiệu quả khi một hàng chứa nhiều phần tử nhưng không còn đủ không gian hiển thị. Thay vì ép các phần tử co lại quá mức hoặc tràn khỏi vùng chứa, CSS Flexbox có thể đưa chúng sang hàng tiếp theo theo cách phù hợp.
Tạo bố cục sản phẩm tự động xuống hàng
Khi xây dựng danh sách sản phẩm, số lượng sản phẩm trên mỗi hàng có thể thay đổi tùy theo chiều rộng màn hình. Thiết lập flex-wrap: wrap giúp các sản phẩm tự động chuyển xuống dòng mới khi không còn đủ khoảng trống.
.sanpham {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.sanpham-item {
flex: 0 0 280px;
}
Cách này phù hợp với các trang bán hàng, danh mục sản phẩm hoặc khu vực hiển thị thẻ nội dung. Khi màn hình thu hẹp, bố cục vẫn giữ được khoảng cách và kích thước phần tử thay vì tạo thanh cuộn ngang không cần thiết.
Làm danh sách nội dung thích ứng với màn hình
flex-wrap cũng hữu ích khi trình bày danh sách thẻ, dịch vụ hoặc các khối thông tin có chiều rộng cố định. Các phần tử có thể tự động xuống hàng khi không gian hiển thị thay đổi.
.dichvu {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.dichvu-item {
flex: 1 1 220px;
}
Điểm quan trọng là nên kết hợp flex-wrap với kích thước linh hoạt của phần tử con. Nhờ đó, bố cục không chỉ xuống hàng mà còn tận dụng tốt phần không gian còn lại trên từng màn hình.
Kết hợp flex-wrap với flex-direction để kiểm soát bố cục
flex-wrap có thể kết hợp với flex-direction để xác định cả hướng sắp xếp và cách các phần tử chuyển sang dòng hoặc cột tiếp theo. Đây là lựa chọn hữu ích khi một bố cục cần thay đổi cách trình bày theo từng nhóm nội dung.
.noidung {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
Với cấu hình trên, các phần tử được sắp xếp theo hàng và tự động chuyển sang hàng mới khi không đủ chiều rộng. Khi cần thay đổi hướng bố cục, có thể điều chỉnh flex-direction mà không phải xây dựng lại toàn bộ cấu trúc 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 *
