CSS Flex布局单元格空间分配不均问题及解决方法咨询

你的.cell元素默认使用flex-basis: auto，这意味着每个cell会先根据自身内容的宽度占据空间，之后再按flex-grow:1分配容器的剩余空间。第二行两个cell的内容长度不同，导致初始宽度不一样，加上相同的分配空间后，总宽度自然有差异，视觉上就显得不均匀。第一行内容长度接近，所以看起来是均匀的。

给.cell直接设置flex: 1（推荐，这是简写形式，包含了flex-grow:1; flex-shrink:1; flex-basis:0%的合理默认值），或者单独添加flex-basis: 0。修改后的CSS如下：

.cell {
  border: 1px solid red;
  flex: 1; /* 替换原来的flex-grow:1 */
  margin: 0px;
  padding: 3px;
  /* 可选：若内容过长，添加换行避免撑开容器 */
  word-wrap: break-word;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 0px;
}

html {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  /*border:1px solid black;*/
  height: calc(100% - 20px);
  margin: 10px;
  padding: 0px;
}

这样设置后，每个cell的初始宽度会被重置为0，容器空间会完全按照flex-grow:1的比例均匀分配，无论内容长度如何，两行的cell宽度都会保持一致。

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