Thuộc tính flexWrap (CSS: flex-wrap) dùng để chỉ định các phần tử con bên trong flex container có được xuống dòng (wrap) hay không.
Cú pháp
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| nowrap | Mặc định. Các item không xuống dòng, co lại vừa một hàng |
| wrap | Các item xuống dòng nếu cần thiết (từ trái sang phải, trên xuống dưới) |
| wrap-reverse | Các item xuống dòng nhưng theo thứ tự ngược (dưới lên trên) |
| initial | Giá trị mặc định |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 180px;
height: 120px;
box-shadow: 0 0 0 5px brown;
display: flex;
flex-wrap: wrap;
}
#demo div {
padding: 0;
width: 50px;
height: 50px;
border: 5px solid;
border-radius: 15%;
}
#demo div:nth-child(even) { border-color: black; }
#demo div:nth-child(odd) { border-color: red; }
</style>
<script>
function changeFlexWrap() {
document.getElementById("demo").style.flexWrap = "nowrap";
document.getElementById("Sample").innerHTML = "Flex wrap của container div đã được đặt thành no-wrap";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>Thay đổi flex wrap property của container div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeFlexWrap()">Thay đổi Flex Wrap</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu flex-wrap: wrap: 5 ô vuông 50x50 trong container 180px → tự xuống dòng (2 hàng). Sau khi nhấn nút: nowrap → 5 ô bị ép co lại nằm một hàng, có thể tràn ra ngoài.