Cách thiết lập độ dài ban đầu của mục linh hoạt (flex item) với JavaScript

Thuộc tính flexBasis (tương ứng CSS flex-basis) xác định kích thước ban đầu của flex item trước khi phân bổ không gian thừa hoặc co lại. Giá trị mặc định là auto (dựa trên nội dung hoặc width/height).

Ví dụ minh họa

Nhấn nút để đặt flex-basis của DIV3 thành 100px:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 1px solid #000;
      width: 450px;
      height: 150px;
      display: flex;
    }
    #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 flexBasis</p>
  <button onclick="display()">Thiết lập</button>
  <script>
    function display() {
      document.getElementById("myID").style.flexBasis = "100px";
    }
  </script>
</body>
</html>

Lưu ý

• Nếu flex-basis: 0 và flex-grow > 0, item sẽ co lại bằng 0 và chỉ nhận không gian thừa.
• flex-basis có ưu tiên cao hơn width/height trên trục chính (main axis).
• Có thể dùng trong shorthand flex: <grow> <shrink> <basis>.