Cách thiết lập hướng của các mục linh hoạt (flex items) với JavaScript

Sử dụng thuộc tính flexDirection (tương ứng CSS flex-direction) để xác định hướng sắp xếp các mục con trong flex container.

Ví dụ minh họa

Nhấn nút để thay đổi hướng từ cột (column) sang hàng ngược (row-reverse):

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 1px solid #000;
      width: 450px;
      height: 150px;
      display: flex;
      flex-direction: column;
    }
    #box div {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: 20px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div style="background-color:orange;">DIV1</div>
    <div style="background-color:blue;">DIV2</div>
    <div style="background-color:yellow;" id="myID">DIV3</div>
  </div>
  <p>Sử dụng thuộc tính flexDirection</p>
  <button onclick="display()">Thiết lập</button>
  <script>
    function display() {
      document.getElementById("box").style.flexDirection = "row-reverse";
    }
  </script>
</body>
</html>

Các giá trị của flexDirection