Thuộc tính HTML DOM Style flexFlow được sử dụng để chỉ định thuộc tính flexDirection và flexWrap của một phần tử. Nó là cách viết tắt của flexDirection và flexWrap và chấp nhận các giá trị theo cùng một thứ tự.
Sau đây là cú pháp cho -
Đặt thuộc tính flexFlow -
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| flex-direction | Itis được sử dụng để chỉ định hướng các mục linh hoạt và các giá trị của nó là hàng, đảo ngược hàng, cột, đảo ngược cột, ban đầu và kế thừa. Giá trị mặc định của nó là hàng. |
| flex-wrap | Nó được sử dụng để xác định xem các vật phẩm mềm có nên bọc hay không. Các giá trị của nó bây giờ làrap, wrap, wrap-reverse, initial và inherit. Giá trị mặc định của nó isnowrap. |
| tên ban đầu | Để đặt giá trị đầu vào thuộc tính này. |
| kế thừa | Để kế thừa giá trị thuộc tính chính |
Chúng ta hãy xem một ví dụ cho thuộc tính flexFlow -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 600px;
height: 190px;
border:1px solid black;
display: flex;
flex-flow: row-reverse no-wrap;
}
#demo div {
width:100px;
height:100px;
}
</style>
<script>
function changeFlexFlow() {
document.getElementById("demo").style.flexFlow="row wrap";
document.getElementById("Sample").innerHTML="The flex flow property is now set to row wrap";
}
</script>
</head>
<body>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>1</div>
<div><img src="https://www.tutorialspoint.com/images/Swift.png"></div>
<div>2</div>
<div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
<div>3</div>
<div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>4</div>
<div><img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>5</div>
</div>
<p>Change the above container div flex flow property by clicking the below button</p>
<button onclick="changeFlexFlow()">Change Flex Flow</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi quy trình linh hoạt Nút ”-
