Flexbox：最大每行项目数

Flexbox 是一个 CSS 布局模块，它提供了一种非常灵活的方式来布局元素。其中一个很方便的特性是可以限制每行中项目的数量。这个特性非常有用，可以让你在布局时控制项目的数量和位置。

如何限制每行的项目数

你可以使用 flex-wrap 属性来指定 flex 容器是否允许换行，以及换行时如何排列项目。默认值是 nowrap，表示不允许换行。

.container {
  display: flex;
  flex-wrap: nowrap;
}

如果你希望每行最多只显示 3 个项目，可以将 flex-wrap 属性的值设置为 wrap，并使用 flex-basis 属性指定项目的对齐宽度。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: calc(100% / 3);
}

在这个例子中，每个项目的宽度被设置为了容器宽度的 1/3。由于 flex-wrap 属性的值为 wrap，当一行中的项目数量超过 3 个时，它们将会自动换行，开始排列下一行。

示例

下面是一个实际的例子，演示如何使用 Flexbox 最大每行项目数特性来创建一个响应式的图库布局。

<div class="gallery">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <img src="image4.jpg" alt="">
  <img src="image5.jpg" alt="">
  <img src="image6.jpg" alt="">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; /* 去除图片之间的间距 */
}

.gallery img {
  flex-basis: calc(100% / 3);
  margin: 10px; /* 添加图片之间的间距 */
}

@media (max-width: 768px) {
  .gallery img {
    flex-basis: calc(100% / 2);
  }
}

@media (max-width: 480px) {
  .gallery img {
    flex-basis: 100%;
  }
}

在这个例子中，我们使用 Flexbox 最大每行项目数特性，将每行的项目数量限制为 3 个。由于每个项目的宽度都是相等的，所以它们在每行中的位置也是相等的。而且，由于我们使用了 calc 函数来计算 flex-basis 属性的值，所以当浏览器窗口的大小发生变化时，每个项目的宽度会自动适应。这就实现了一个响应式的图库布局。

总结

通过使用 Flexbox 最大每行项目数特性，你可以限制每行中项目的数量，并精确控制它们的位置。这个特性非常有用，在创建网格布局、响应式布局等方面都可以大显身手。