在 CSS 中，Flex 布局提供了一种方便的方式来创建灵活的布局。然而，在某些情况下，我们希望在一行中显示固定个数的元素，并在超过该数量后进行换行，并且将超出的元素“靠左”对齐。本文将介绍使用 Flex 布局实现这个需求的完美解决方案。

步骤一：设置容器属性

首先，在 HTML 中创建一个父容器，并为其添加一个类名，以便于我们在 CSS 中进行样式定义。例如：

<div class="container">
  <!-- 子元素 -->
</div>

然后，在 CSS 中，我们需要为父容器设置 display: flex 属性，以启用 Flex 布局：

.container {
  display: flex;
}

步骤二：设置子元素属性

接下来，我们需要为子元素设置属性来实现我们的需求。首先，我们需要设置子元素的宽度为固定百分比，以便平均分布在一行中。同时，我们设置子元素的 flex-grow: 1 属性，以确保所有子元素占据相同的剩余空间。

.container {
  display: flex;
}

.container > * {
  flex: 1;
}

步骤三：设置换行和对齐方式

接下来，我们需要设置子元素在超出一行时进行换行，并将超过的元素“靠左”对齐。我们可以通过添加 flex-wrap: wrap 和 justify-content: flex-start 属性来实现。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.container > * {
  flex: 1;
}

完整代码及效果演示

下面是完整的 CSS 代码，可以复制粘贴到 HTML 的 <style> 标签中，或者保存为一个独立的 CSS 文件并链接到 HTML 中使用：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.container > * {
  flex: 1;
}

效果演示：

[元素1] [元素2] [元素3] [元素4]
[元素5] [元素6] [元素7]
[元素8]

结论

使用上述 CSS 代码，我们可以轻松地实现在 Flex 布局下一行显示固定个数的元素，并在超出数量后进行换行，并将超出的元素“靠左”对齐的效果。

这种技术在很多应用场景中都非常有用，比如制作图片展示、商品列表等。希望本篇博客对你有所帮助！

本文来自极简博客，作者：夏日冰淇淋，转载请注明原文链接：CSS – 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其 内容丰富一些