Thuộc tính flex-flow - Shorthand cho flex-direction và flex-wrap

Thuộc tính flex-flow là shorthand 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 để wrap hoạt động trên column */
    }
    .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	Tương đương	Hành vi
`row nowrap`	Mặc định	Hàng ngang, không wrap
`row wrap`	row + wrap	Hàng ngang, xuống dòng
`column wrap`	column + wrap	Cột dọc, sang cột mới
`row-reverse wrap`	row-reverse + wrap	Ngăn ngang ngược, xuống dòng

Lưu ý quan trọng cho column wrap

Container phải có chiều cao cố định (height/max-height) để wrap hoạt động
Khác với row wrap (tự wrap dựa trên width container)
Cross-axis direction quyết định hướng wrap

Ví dụ thực tế: Masonry-like layout

.masonry {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
  max-height: 800px;
  gap: 1rem;
}
.masonry-item {
  width: 200px;
  flex-shrink: 0;
}

Best Practice

Luôn dùng flex-flow thay vì viết 2 dòng riêng
Mặc định row nowrap thường gây tràn trên mobile
Cân nhắc flex-flow: row wrap cho responsive grid đơn giản