行内嵌套列Flexbox：子元素全屏高度与垂直均匀分布问题

我来帮你搞定这个Flexbox的垂直分布问题～你遇到的核心问题其实是Flex容器的高度传递链没打通，导致flex:1和height:100%没起到预期作用，咱们一步步来修正：

1. 先打通根节点的高度传递 #

Flexbox的高度依赖父级容器的高度参考，如果最外层的html和body没有占满视口高度，那你的.stage容器设置height:100%也没有意义。先加上这段基础样式：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 确保外层Flex容器占满可用高度 #

你的.stage是外层row方向的Flex容器，需要明确设置它的高度为100%，同时保持display:flex和flex-direction:row：

.stage {
  display: flex;
  flex-direction: row;
  height: 100%; /* 绑定到视口高度 */
  gap: 1rem; /* 可选，列之间的间距 */
  padding: 1rem;
  box-sizing: border-box;
}

3. 内层Column容器要“伸展开”并设置分布规则 #

这是关键！内层的column容器需要两个核心设置：

• flex:1：让每个列容器平分外层容器的宽度，同时获取足够的垂直空间
• justify-content: space-between/space-around/space-evenly：控制子盒子的垂直分布方式

比如内层容器的样式：

.inner-column {
  display: flex;
  flex-direction: column;
  flex: 1; /* 关键：占满外层分配的空间 */
  justify-content: space-between; /* 垂直两端对齐，盒子均匀分布 */
  /* 可选：space-around 盒子上下有相等间距；space-evenly 所有间距相等 */
  background-color: #f5f5f5;
  padding: 1rem;
}

为什么之前的代码无效？ #

大概率是这两个原因：

• 没有给html和body设置height:100%，导致.stage的height:100%没有父级高度参考，等于没设置
• 内层column容器没加flex:1，它的高度只由子盒子内容撑开，自然没法让子盒子垂直均匀分布

完整示例结构 #

假设你的HTML结构是这样的：

<div class="stage">
  <div class="inner-column">
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>
  </div>
  <div class="inner-column">
    <div class="box">盒子A</div>
    <div class="box">盒子B</div>
  </div>
</div>

加上上面的CSS，就能实现你想要的右侧目标效果啦～

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