Thuộc tính flex-basis trong CSS Flexbox

Thuộc tính flex-basis xác định kích thước ban đầu của flex item trên trục chính trước khi flex-grow/flex-shrink áp dụng. Giá trị mặc định: auto (dựa trên width/height hoặc content).

Cú pháp

.item {
  flex-basis: <length> | <percentage> | auto | content;
}

Ví dụ: flex-basis: 350px

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e67e22;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div style="flex-basis: 350px">Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
    <div>Q9</div>
  </div>
</body>
</html>

flex-basis vs width/height

Trường hợp	flex-basis	width/height
flex-direction: row	Chiều rộng chính	Fallback nếu basis=auto
flex-direction: column	Chiều cao chính	Fallback nếu basis=auto
Priority	Cao hơn (ghi đè width)	Thấp hơn
`auto`	Dùng width/height hoặc content	Giá trị pixel/%
`0` hoặc `0%`	Kích thước 0, chỉ grow chia không gian	0px

Mối quan hệ: flex-grow, flex-shrink, flex-basis

.item {
  /* Tính toán cuối cùng: */
  /* 1. Bắt đầu từ flex-basis */
  /* 2. Nếu có không gian thừa → flex-grow phân bổ */
  /* 3. Nếu thiếu không gian → flex-shrink co lại */
}

Shorthand: flex

.item {
  flex: 1 1 350px; /* grow shrink basis */
  /* Tương đương: */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 350px;
}

Các pattern phổ biến

/ * Sidebar cố định, content linh hoạt * /
.sidebar { flex: 0 0 250px; }      /* Không grow/shrink, 250px */
.content { flex: 1 1 auto; }       /* Chiếm phần còn lại */

/* Chia đều 3 cột */
.item { flex: 1 1 0%; } /* basis 0% → chia đều không gian */

/* Item cố định, không bao giờ thay đổi */
.fixed { flex: 0 0 100px; } /* flex: none */

/* Item ưu tiên không gian nhưng có kích thước tối thiểu */
.fluid { flex: 1 1 300px; }

Lưu ý

flex-basis: auto (mặc định) → xem width/height → content size
Set flex-basis: 0 khi dùng flex-grow để chia tỷ lệ chính xác
Trong shorthand flex, basis là giá trị thứ 3 (bắt buộc có đơn vị hoặc %)