Cách thiết lập độ dài mục tương đối so với các mục còn lại với JavaScript

Thuộc tính flex là shorthand kết hợp ba thuộc tính: flex-grow, flex-shrink và flex-basis. Nó xác định cách flex item co giãn tương đối so với các item khác trong cùng container.

Ví dụ minh họa

Nhấn nút để đặt flex: 1 cho tất cả các DIV con, khiến chúng chia đều không gian:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 1px solid #000;
      width: 300px;
      height: 400px;
      display: flex;
    }
  </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;">DIV3</div>
  </div>
  <button onclick="display()">Thiết lập</button>
  <script>
    function display() {
      var box = document.getElementById("box");
      var divs = box.getElementsByTagName("DIV");
      for (var i = 0; i < divs.length; i++) {
        divs[i].style.flex = "1";
      }
    }
  </script>
</body>
</html>

Cú pháp flex

flex: <flex-grow> <flex-shrink> <flex-basis>