Các flex-wrapbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.
Nó xác định xem các mục flex được buộc trong một dòng hay có thể được chuyển thành nhiều dòng. Nếu được đặt thành nhiều dòng, nó cũng xác định trục chéo xác định hướng các dòng mới được xếp chồng lên nhau.
Nhắc lại: trục chéo là trục vuông góc với trục chính. Hướng của nó phụ thuộc vào hướng trục chính.
Các flex-wrapbất động sản chấp nhận 3 giá trị khác nhau:
nowrap( mặc định ): một dòng có thể khiến vùng chứa bị trànwrap: nhiều đường, hướng được xác định bởiflex-directionwrap-reverse: nhiều đường, ngược với hướng được xác định bởiflex-direction
Cú pháp
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Bản giới thiệu
Trong bản demo sau:
- Danh sách đỏ được đặt thành
nowrap - Danh sách màu vàng được đặt thành
wrap - Danh sách màu xanh lam được đặt thành
wrap-reverse
Lưu ý: flex-directionđược thiết lập với giá trị mặc định: row.
Xem Pen Flex-wrap: demo bằng CSS-Tricks (@ css-trick) trên CodePen.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Để biết thêm thông tin về cách kết hợp các cú pháp để nhận được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết này (CSS-Tricks) hoặc bài viết này (DevOpera).