使用Flex布局实现多行多列，每个列宽度相同

一、Flex布局实现多行多列

在前端布局中，Flexbox（弹性布局）是一个非常灵活的布局工具。通过设置父容器的 display: flex 和 flex-wrap: wrap，可以让子元素在宽度不足时自动换行，从而实现多行布局。

示例

<template>
  <div class="box-wrapper">
    <div v-for="item in 10" :key="item">{{ item }}</div>
  </div>
</template>

<style lang="scss" scoped>
.box-wrapper {
  width: 100vw;
  height: 100vh;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;

  div {
    border: 1px solid;
    flex: 0 1 calc(100% / 3); /* 每行三列 */
  }
}
</style>

• flex: 0 1 calc(100% / 3)

  • 0 → flex-grow 不放大

  • 1 → flex-shrink 可缩小（避免溢出）

  • calc(100% / 3) → flex-basis，每个元素宽度为父容器的三分之一

• flex-wrap: wrap → 允许子元素换行，形成多行布局

---

二、整除与不整除的情况

假设我们有 10 个子元素，每行三列：

• 第一行：1 2 3

• 第二行：4 5 6

• 第三行：7 8 9

• 第四行：10

注意：最后一行只有一个元素。

为什么最后一行宽度仍然和前面一致？

• 每个元素宽度是 calc(100% / 3)，固定宽度

• 不管最后一行有几个元素，它的宽度 不会自动撑满剩余空间

• 左侧空白不会影响元素自身宽度

这种方式可以保持所有元素宽度一致，布局整齐。

三、总结

1. Flex布局多行多列核心 ：父容器 flex-wrap: wrap + 子元素固定宽度 flex-basis。

2. 不整除情况：最后一行元素宽度依然固定，布局整齐，不需要自动伸长。

3. 优点：简单、无需额外计算，兼容多行多列布局需求。