如何将文章的不同区块显示为三个宽度相等的独立分列？

方案1：基于Flex布局实现三等分 #

你当前代码的问题是Flex布局默认不会自动给子元素分配等宽，需要给子元素添加flex: 1属性强制均分容器宽度。

完整代码示例：

* {
  /* 全局统一盒模型，避免内边距/边框撑宽元素 */
  box-sizing: border-box;
}
article {
  display: flex;
  /* 如果需要列之间加间隙可以加下面这行，单位可自定义 */
  gap: 20px;
}
article > section {
  /* 三个属性简写：等分剩余空间、允许等比缩小、基础宽度为0 */
  flex: 1;
}

HTML部分和你现有代码一致不需要修改。

方案2：基于Grid布局实现三等分 #

Grid布局实现多列等分更简洁，不需要修改子元素样式，直接在父容器上配置即可：

* {
  box-sizing: border-box;
}
article {
  display: grid;
  /* 重复3列，每列占1份相等的可用空间 */
  grid-template-columns: repeat(3, 1fr);
  /* 同样可以加间隙 */
  gap: 20px;
}

这种方案后续如果要改列数只需要修改repeat的第一个参数即可，维护成本更低。

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