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

Thuộc tính flex-wrap kiểm soát việc các flex items có được phép xuống dòng (wrap) khi không đủ không gian trên trục chính (main axis) hay không.

Các 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;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </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 ra nhiều dòng, align-content điều khiển cách phân bố các dòng dọc trục cross-axis:

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

Responsive Grid với flex-wrap

.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.responsive-grid > * {
  flex: 1 1 250px; /* grow | shrink | basis */
  min-width: 250px;
}

Tự động tạo grid responsive: 1 cột mobile, 2 cột tablet, 3-4 cột desktop.

Lưu ý

• flex-wrap chỉ hoạt động khi container là flex container
• Mặc định nowrap có thể gây tràn layout trên mobile
• Luôn set gap thay vì margin cho items để dễ quản lý khoảng cách