Thuộc tính flex - Shorthand cho flex-grow, flex-shrink, flex-basis

Thuộc tính flex là shorthand (rút gọn) kết hợp 3 thuộc tính: flex-grow, flex-shrink, flex-basis trong một dòng.

Cú pháp

.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

Các giá trị phổ biến

Shorthand	Tương đương	Mô tả
`flex: 1`	`1 1 0%`	Chia đều không gian (phổ biến nhất)
`flex: auto`	`1 1 auto`	Dựa trên width/height, sau đó chia đều thừa
`flex: initial`	`0 1 auto`	Mặc định: không grow, co lại nếu cần
`flex: none`	`0 0 auto`	Cố định kích thước, không grow/shrink
`flex: 2 0 350px`	Từng giá trị	Grow 2, không shrink, basis 350px

Ví dụ: flex: 20 0 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: 20 0 350px">Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
    <div>Q9</div>
  </div>
</body>
</html>

Giải thích flex: 20 0 350px

flex-grow: 20: Nhận 20 phần không gian thừa
flex-shrink: 0: Không co lại khi thiếu không gian
flex-basis: 350px: Kích thước cơ sở 350px trước khi grow

Best Practice: Holy Grail Layout

.container {
  display: flex;
  min-height: 100vh;
}
header, footer {
  flex: 0 0 auto; /* Không grow/shrink, height tự nhiên */
}
.main {
  display: flex;
  flex: 1; /* Chiếm không gian còn lại */
}
.sidebar {
  flex: 0 0 250px; /* Cố định 250px */
}
.content {
  flex: 1; /* Phần còn lại */
}

Lưu ý

Luôn dùng flex shorthand thay vì 3 thuộc tính riêng lẻ
flex: 1 là "ma thuật" cho chia đều không gian
Tránh flex: 1 1 auto khi muốn chia tỷ lệ chính xác (dùng flex: 1 1 0%)