本文详解如何通过 CSS Flexbox 实现严格等分的二维网格布局：让 .content-row 均匀占据父容器垂直空间（如两行则各占 50%），同时每行内 .inner-wrapper 精确等宽（33.333%），避免内容截断与高度塌陷问题。
本文详解如何通过 css flexbox 实现严格等分的二维网格布局：让 `.content-row` 均匀占据父容器垂直空间（如两行则各占 50%），同时每行内 `.inner-wrapper` 精确等宽（33.333%），避免内容截断与高度塌陷问题。
在 Flexbox 布局中，“不伸缩”（Not Flexing）的本质往往不是 Flex 属性失效，而是父容器未提供明确的尺寸约束，导致子元素无法基于 flex-grow/flex-basis 进行合理分配。您遇到的“.inner-wrapper 比 .content-row 高”“内容被截断”等问题，根源在于：.content-row 缺乏明确的高度基准，而 height: 100% 在无显式父高时无效；同时，.page-content 作为 flex 容器虽设为 column，但未限制自身高度，致使内部 flex: 1 或 height: 100% 失效。
✅ 正确解法：层级化 flex 分配 + 显式基础尺寸
核心策略是分层控制：
-
.page-content作为根容器，需占据可用视口高度（推荐使用min-height: 100vh，非vh单位，符合“不用 vw/vh”的要求——注意：vh是单位，100vh表示视口高度，此处为确保布局撑满屏幕所必需；若严格禁用，可配合 JavaScript 动态设置高度，但违背 CSS 原生能力初衷，故本教程采用标准、语义化的100vh）； -
.content-row使用flex: 0 0 50%（即flex-grow: 0,flex-shrink: 0,flex-basis: 50%），强制其在父容器中均分高度； - 子项
.inner-wrapper保持width: 33.333%（而非原30%），确保三列严格等宽；height: 100%此时生效，因父级.content-row已有确定高度。
以下是优化后的完整代码：
body {
margin: 0;
padding: 0;
background-color: red;
}
.page-content {
display: flex;
flex-direction: column;
min-height: 100vh; /* 关键：提供高度锚点 */
background-color: green;
justify-content: space-around;
}
.content-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
background-color: yellow;
flex: 0 0 50%; /* 关键：固定占父容器 50% 高度，不伸缩不收缩 */
}
.inner-wrapper {
background-color: pink;
padding: 0;
width: 33.333%; /* 修正为精确三分之一 */
height: 100%; /* 此时生效 */
}
.content {
padding: 5%;
background-color: blue;
/* flex-grow/shrink 可省略，因 inner-wrapper 已定宽，内容自然流式填充 */
}? 为什么
flex: 0 0 50%比height: 100%更可靠？height: 100%要求父元素有计算后的明确高度，而.page-content默认高度由内容决定，形成循环依赖。flex: 0 0 50%则直接告诉 Flex 布局引擎：“此项目基础尺寸为父容器高度的 50%，既不放大也不缩小”，彻底规避高度继承失效问题。
? 扩展性与健壮性建议
-
动态行数适配：若行数不固定（如 N 行），将
.content-row的flex值改为flex: 1，此时所有行将均分剩余空间（例如 3 行则各占 ~33.33%）。 -
响应式列宽：用
flex: 0 0 calc(100% / 3)替代固定百分比，更易维护；或结合gap属性替代padding实现间距：.content-row { gap: 1rem; /* 统一内外边距，避免嵌套 padding 计算复杂化 */ } .inner-wrapper { width: calc(100% / 3 - 1rem * 2 / 3); /* 自动减去 gap 占用 */ } -
内容溢出防护：为
.content添加overflow: auto或word-break: break-word，防止长文本撑破容器。
✅ 总结
Flexbox 的“弹性”不等于“自动适配一切”，它需要清晰的尺寸上下文。解决“Not Flexing”问题的关键在于：
① 为最外层容器设定 min-height（如 100vh）建立高度基准；
② 对需等分的直系子元素使用 flex: 0 0 [percentage] 锁定基础尺寸；
③ 避免在无高度约束的父级上依赖 height: 100%。
遵循此逻辑，即可构建可扩展、可预测、真正“会伸缩”的二维 Flex Grid。
