Thuộc tính flex-wrap: Cho phép flex items xuống dòng

Thuộc tính flex-wrap chỉ định flex items có được phép xuống dòng (wrap) khi không đủ không gian trên trục chính hay không. Mặc định: nowrap (ép tất cả vào 1 dòng).

3 giá trị

Ví dụ: flex-wrap: wrap

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e67e22;
      flex-wrap: wrap;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      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>

Kết hợp với align-content

Khi flex-wrap: wrap tạo nhiều dòng, align-content căn các dòng:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* hoặc center, space-around, stretch */
  height: 400px;
}

Responsive Grid đơn giản với flex-wrap

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.grid > * {
  flex: 1 1 250px; /* Tối thiểu 250px, chia đều không gian thừa */
  min-width: 250px;
}

Tự động: 1 cột (<500px), 2 cột (500-750px), 3 cột (750-1000px), 4 cột (>1000px).

Shorthand: flex-flow

.container {
  flex-flow: row wrap; /* direction + wrap */
}

Lưu ý

• Mặc định nowrap gây tràn layout trên mobile → luôn cân nhắc wrap
• gap (hỗ trợ Flexbox Chrome 84+) dễ quản lý hơn margin
• Khi wrap, align-items căn items TRONG dòng, align-content căn CÁC DÒNG