CSS flex布局下flex-grow无法实现多列高度一致问题求解

• 对flex-grow的作用范围理解有误：该属性仅用于分配flex容器**主轴（当前布局下为水平方向）**的剩余空间，作用是调整子项的宽度占比，和垂直方向的高度对齐没有关系，无法实现等高效果。
• flex容器的交叉轴对齐属性配置错误：你给.container设置了align-items: center，该属性会让所有flex子项按自身内容高度在交叉轴居中对齐，自然不会自动拉伸填充容器高度。flex布局下align-items的默认值为stretch，只有该值会触发子项高度自动拉伸到和容器一致，实现多列等高。

你只需要调整.container的align-items配置即可：

.container {
  background-color: red;
  width: 100vw;
  display: flex;
  justify-content: center;
  /* 替换原来的align-items: center，或者直接删除该行使用默认的stretch值 */
  align-items: stretch;
}
.container .item {
  background-color: blue;
  padding: 5px;
  /* flex-grow保留则子项会平分水平剩余宽度，不需要可以删除 */
  flex-grow: 1;
  margin: 25px;
  max-width: 200px;
}

如果需要在保持列等高的同时，让列内的文本内容垂直居中，可以给.item新增flex相关配置：

.container .item {
  /* 原有配置保留，新增以下两行 */
  display: flex;
  align-items: center;
}

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