Chrome移动端模拟器中flex-wrap子项无法占满100%视口宽度原因

核心原因 #

你遇到的问题根源在于两个关键点：section 的宽度设置，以及子项缺少明确的宽度约束：

1. width: 300vw 的适配逻辑问题：
   桌面端视口宽度较大，300vw 等于3倍当前视口宽，刚好能容纳3个默认占满视口宽度的子项排成一行，换行后形成3×3网格，看起来子项是占满视口的。但切换到移动端后，300vw 变成了3倍移动端窄视口的宽度，而子项没有强制占满一行的规则，flex布局会根据子项的内在尺寸（比如内容宽度）来分配每行的子项数量，自然不会占满100%视口宽度。
2. 子项缺少flex宽度约束：
   你的子项仅设置了 display: flex，但没有告诉flex布局它应该占满一行的宽度。flex布局在 flex-wrap: wrap 模式下，默认会尽可能多地在一行放置子项，直到空间不足才会换行。

修复方案 #

根据你的需求（移动端子项占满100%视口宽度），给子项添加以下CSS规则即可：

section > div {
  display: flex;
  flex: 1 0 100%; /* 强制子项占满一行的可用宽度 */
  /* 或者也可以直接设置 width: 100vw; */
}

如果你的需求是始终保持3×3网格（每行3个），不管视口大小，那可以把规则改成：

section > div {
  display: flex;
  flex: 1 0 33.333%; /* 每行固定放3个，占满section的300vw宽度 */
}

补充说明 #

另外要注意，移动端浏览器的默认视口缩放可能会影响显示效果，确保你的HTML头部添加了标准的viewport meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这能保证视口宽度正确匹配设备屏幕宽度，避免缩放导致的布局偏差。

内容的提问来源于stack exchange，提问作者John Abraham