弹性布局在移动端为什么不能自动换行？

Top丶闪闪提问于 2026-03-08 00:59:20 阅读 6

移动

我用 flex 做了一个商品列表，在 PC 上看着没问题，但到了手机上子元素不换行，直接溢出屏幕了，明明加了 flex-wrap: wrap 啊？

试过给容器加 width: 100% 和 overflow: hidden 都没用，是不是 Vue 里写法有问题？

<template>
  <div class="product-list">
    <div class="item" v-for="i in 5" :key="i">商品{{ i }}</div>
  </div>
</template>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 100px;
  background: #eee;
  margin: 8px;
}
</style>

我来解答赞 8 收藏

反馈

1 条解答

UX-悦洋 Lv1

你给子元素设了固定宽度 width: 200px，这在小屏手机上肯定不够放。改成百分比或者用 flex-basis 配合 min-width 更灵活。

试试这样改：

.product-list {

  display: flex;

  flex-wrap: wrap;

  gap: 8px; /* 替代margin，更整洁 */

}

.item {

  flex: 1 0 calc(50% - 8px); /* 每行放两个，减去gap */

  min-width: 0; /* 防止内容溢出 */

  height: 100px;

  background: #eee;

}

关键点：
1. 用 calc(50% - 8px) 确保两个 item 加 gap 刚好占满一行
2. flex: 1 0 让元素可伸缩但不小于基础尺寸
3. 现代浏览器直接用 gap 替代 margin 更方便

如果还要适配不同屏幕尺寸，可以加媒体查询调整 flex-basis 值。比如大屏显示4个，小屏显示2个这样。

2026-03-08 01:01