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

Thuộc tính flex-flow là shorthand (rút gọn) kết hợp flex-direction và flex-wrap trong một khai báo.

Cú pháp

.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

Ví dụ: flex-flow: column wrap

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e67e22;
      flex-flow: column wrap;
      padding: 10px;
      gap: 10px;
      height: 300px; /* Cần height cho column wrap */
    }
    .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>Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
    <div>Q9</div>
  </div>
</body>
</html>

Các tổ hợp phổ biến

flex-flow	flex-direction	flex-wrap	Mô tả
`row nowrap`	row	nowrap	Mặc định: 1 hàng ngang
`row wrap`	row	wrap	Hàng ngang, xuống dòng
`row wrap-reverse`	row	wrap-reverse	Hàng ngang, dòng mới lên trên
`column wrap`	column	wrap	Cột dọc, sang cột mới (cần height)
`column-reverse wrap`	column-reverse	wrap	Cột dọc ngược, sang cột mới

Lưu ý quan trọng: column wrap cần height

.column-wrap {
  display: flex;
  flex-flow: column wrap;
  height: 500px; /* BẮT BUỘC: container phải có height */
  max-height: 80vh;
}

Khác với row wrap (tự wrap dựa trên width), column wrap cần height container để biết khi nào sang cột mới.

Responsive Pattern

.responsive {
  display: flex;
  flex-flow: row wrap; /* Mặc định responsive */
  gap: 1rem;
}
.responsive > * {
  flex: 1 1 250px; /* Tối thiểu 250px, chia đều không gian */
}

Best Practice

Luôn dùng flex-flow thay vì 2 dòng riêng
Mặc định row nowrap → cân nhắc row wrap cho responsive
Kết hợp gap thay vì margin