无需媒体查询用Flex实现桌面3列移动1列布局及gap失效排查

gap 是作用在flex容器上的属性，用来控制flex子项之间的间距，你当前代码把gap: 10px写在了flex子项.box上，自然不会产生效果。
另外你写的flex: 0 0 300px 0是无效值，flex简写属性最多接收3个参数，同时给子项设置固定flex基础宽度+width:100%也存在样式冲突。

不需要写任何media query，靠flex自带的换行+伸缩规则就能实现大屏3列、小屏单列的效果，完整正确代码如下：

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  /* 新增修正属性 */
  flex-wrap: wrap; /* 允许子项自动换行 */
  gap: 10px; /* gap移到父容器，控制子项间距 */
}

.box {
  /* flex属性：基础宽度300px，允许自动伸缩 */
  flex: 1 1 300px;
  border: 1px solid;
}

实现原理 #

• 父容器设置flex-wrap: wrap后，子项总宽度超过容器宽度时会自动折行，不会强行挤在同一行
• 子项flex: 1 1 300px的含义是：子项基础宽度为300px，容器有剩余空间时会自动拉伸占满，空间不足时会自动收缩
• 当容器宽度 ≥ 3300px + 210px（两个间距总宽度）= 920px时，一行刚好能放下3个盒子，自动形成3列布局；当容器宽度小于这个值，一行放不下3个盒子就会自动折行，折行后的盒子因为设置了flex-grow: 1会自动占满整行宽度，自然形成移动端单列效果。

内容的提问来源于stack exchange，提问作者Jenny ler