CSS设置flex-wrap:wrap后文本单元格变为单列的问题求解

你把flex属性放错了元素。
flex是仅对flex子项生效的属性，你当前把flex: 200px写在了作为flex容器的<section>上，这条规则完全不会作用到内部的卡片元素上。内部的<article>子项没有设置对应的基准宽度和伸缩规则，默认最小宽度由内容决定，宽度不足时每个子项会直接占满整行，最终呈现为单列布局。
你在多环境运行效果一致、W3C校验不报错，是因为CSS语法本身没有错误，只是属性写在了不对应的元素上，校验工具无法识别这类逻辑错误。

将flex: 200px从section的样式规则中移除，添加到子项article的样式里即可，修正后的完整CSS代码：

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

header {
  background: purple;
  height: 100px;
}

h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}

section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

article {
  padding: 10px;
  margin: 10px;
  background: aqua;
  flex: 200px;
}

给article设置flex: 200px是简写写法，等价于三个属性的组合：

• flex-basis: 200px：每个卡片的初始基准宽度为200px
• flex-grow: 1：行内有剩余空间时，卡片会均匀拉伸占满整行宽度
• flex-shrink: 1：空间轻微不足时卡片会适当收缩，当一行已经无法容纳收缩后的卡片时，就会自动折到下一行排列，和教程展示的效果完全一致。

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