Thuộc tính flexFlow trong HTML DOM Style

Thuộc tính flexFlow là shorthand kết hợp flexDirection và flexWrap của flex container. Nhận giá trị theo thứ tự: flex-direction flex-wrap.

Cú pháp

object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"

Giá trị tham số

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  #demo {
    width: 600px;
    height: 190px;
    border: 1px solid black;
    display: flex;
    flex-flow: row-reverse nowrap;
  }
  #demo div { width: 100px; height: 100px; }
</style>
<script>
  function changeFlexFlow() {
    document.getElementById("demo").style.flexFlow = "row wrap";
    document.getElementById("Sample").innerHTML = "Flex flow property đã được đặt thành 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>Thay đổi flex flow property của container div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeFlexFlow()">Thay đổi Flex Flow</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu flex-flow: row-reverse nowrap: 10 item xếp ngược chiều (5→1), một hàng, tràn ra ngoài. Sau khi nhấn nút: row wrap → xếp trái→phải, tự xuống dòng khi hết chỗ.

Ưu điểm: Viết gọn 1 dòng thay vì 2 dòng flex-direction + flex-wrap.