Flex三列布局优化：如何利用最后一列右侧的留白空间？

你的问题根源在于给每个列固定了33.33%的宽度，再加上justify-content:space-evenly的设置，导致无论内容多少，列都会占据固定宽度，内容较短的列右侧自然出现留白。以下是两种Flex实现的解决方案：

方案一：自适应平分空间（推荐） #

移除固定宽度，通过flex属性让列自动填充容器空间，同时设置最小宽度避免布局坍塌：

#side {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* 移除justify-content:space-evenly，flex:1会自动分配空间 */
}
#side > div {
  text-align: justify;
  padding: 1.5rem;
  flex: 1; /* 列会根据剩余空间自动扩展/收缩，实现平分效果 */
  min-width: 30%; /* 保证列的最小宽度，防止内容过窄时挤成单列 */
}

设置后，所有列内容充足时会均匀平分容器宽度；最后一列内容较少时，它会根据内容调整宽度，剩余空间由前两列平分，彻底消除右侧留白。

方案二：单独控制最后一列宽度 #

如果希望前两列保持近似三分之一宽度，最后一列仅适配内容宽度，可给最后一列添加类名单独设置：

修改后的HTML： #

<div id="side">
  <div>long content</div>
  <div>long content</div>
  <div class="short-col">short</div>
</div>

修改后的CSS： #

#side {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#side > div {
  text-align: justify;
  padding: 1.5rem;
  flex: 1;
  min-width: 30%;
}
#side > .short-col {
  flex: 0 1 auto; /* 禁止列扩展，仅根据内容确定宽度 */
}

这种方式下，前两列平分容器剩余空间，最后一列只占据内容所需宽度，右侧不会有多余留白。

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