Thuộc tính CSS flex-wrap dùng để chỉ định các flex item có bị ép vào một hàng duy nhất. Hay chúng sẽ được xuống thành nhiều hàng. Thuộc tính flex-wrap cho phép kiểm soát hướng mà các hàng được xếp chồng lên nhau. Nó dùng để chỉ định định dạng một hàng hoặc nhiều hàng cho các flex item. Các item này nằm bên trong flex container.
Cú pháp
flex-wrap: nowrap | wrap | wrap-reverse | initial;
Giá trị mặc định: nowrap
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
nowrap | Giữ tất cả các flex item trên một hàng duy nhất. Ngay cả khi chúng vượt quá chiều rộng của container, gây ra tràn. |
wrap | Cho phép các flex item xuống nhiều hàng dựa trên chiều rộng của chúng. Tạo ra một bố cục linh hoạt và đáp ứng hơn. |
wrap-reverse | Tương tự như wrap, nhưng xếp các hàng theo thứ tự ngược lại. Hàng cuối cùng ở trên cùng và hàng đầu tiên ở dưới cùng. |
initial | Đặt lại thuộc tính về giá trị mặc định của nó. Tương đương với nowrap. |
Ví dụ về thuộc tính CSS flex-wrap
Đây là các ví dụ minh họa cách mỗi giá trị của thuộc tính flex-wrap hoạt động. Chúng ta sẽ đi từng cái một:
1. Sử dụng thuộc tính CSS flex-wrap: wrap
Thuộc tính này được sử dụng để ngắt các flex item thành nhiều hàng. Nó làm cho các flex item xuống hàng theo chiều rộng của chúng.
Cú pháp:
flex-wrap : wrap;
Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính CSS flex wrap.
html<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:wrap property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Kết quả:
2. Sử dụng thuộc tính CSS flex-wrap: nowrap
Giá trị mặc định của wrap-flex là nowrap. Nó được sử dụng để chỉ định rằng các item không xuống hàng. Nó làm cho các item nằm trên một hàng duy nhất.
Cú pháp:
flex-wrap: nowrap;
Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính CSS flex wrap.
html<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: nowrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:nowrap property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Kết quả:
3. Sử dụng thuộc tính CSS flex-wrap: wrap-reverse
Thuộc tính này được sử dụng để đảo ngược luồng của các flex item. Các item này sẽ xuống hàng mới khi cần.
Cú pháp:
flex-wrap: wrap-reverse;
Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính CSS flex wrap.
html<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:wrap-reverse property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Kết quả:
4. Sử dụng thuộc tính CSS flex-wrap: initial
Thuộc tính này được sử dụng để đặt nó làm giá trị mặc định.
Cú pháp:
flex-wrap: initial;
Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính CSS flex wrap.
html<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: initial;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:initial property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Kết quả:
Các trình duyệt được hỗ trợ
Các trình duyệt được hỗ trợ bởi thuộc tính CSS flex-wrap được liệt kê dưới đây:
Lưu ý: Đảm bảo rằng bạn kiểm tra bố cục của mình trên các trình duyệt khác nhau. Đặc biệt là các phiên bản cũ hơn, vì flex-wrap có thể hoạt động khác nhau. Trong một số trường hợp(như Internet Explorer), có thể xảy ra các lỗi bố cục.