CSS如何解决容器高度不一致_使用flex盒模型对齐-css教程-PHP中文网

align-items: stretch 默认生效但常“失效”，因父容器无高度、子项设了height或被align-self覆盖；需确保父容器有明确高度、子项无交叉轴尺寸限制、box-sizing: border-box及图片设height: 100%。

css如何解决容器高度不一致_使用flex盒模型对齐

align-items: stretch 默认就生效，但多数时候它“看起来没用”，是因为父容器没高度、子项写了 height、或被 align-self 覆盖了。

为什么 `align-items: stretch` 没拉齐高度

Flex 容器默认就是 align-items: stretch，但它只对“没设交叉轴尺寸”的子项起作用。在 flex-direction: row（默认）下，交叉轴是垂直方向，所以子项不能有 height、min-height、max-height（值不是 auto），否则拉伸直接失效。

常见干扰点：

父容器高度为 auto，没有明确 height 或 min-height，stretch 就失去参照基准
某个子项写了 align-self: flex-start，覆盖了父级的 stretch 行为
子项里有 img 且没加 height: 100%，替换元素自带固有尺寸，会阻断拉伸
用了 box-sizing: content-box（默认），而 padding 和 border 会额外撑高，导致视觉不齐

让所有子项真正等高的最小可行配置

不需要改结构，只需清理样式并补上关键约束：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给父容器加 display: flex 和明确高度，例如 min-height: 200px
移除所有子项上的 height、min-height、max-height
确保子项没写 align-self，或显式重置为 align-self: stretch
所有子项加 box-sizing: border-box，把 padding 和 border 算进高度内
图片类子项补 height: 100%; object-fit: cover，避免比例失真又撑高

示例：

.container {
  display: flex;
  min-height: 240px;
}
.item {
  flex: 1;
  padding: 16px;
  border: 1px solid #eee;
  box-sizing: border-box;
}
.item img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

`flex: 1` 比 `align-items: stretch` 更稳的场景

当内容高度差异大、或存在 margin 干扰、或需要忽略子项自身高度时，flex: 1 是更主动的解法。它让子项平分容器剩余空间，和内容无关。

flex: 1 等价于 flex: 1 1 0，其中 flex-basis: 0 会忽略 height 声明，强制从零开始分配空间
如果子项本来就有 height: 200px，又想让它参与等高，必须改成 flex: 1 1 auto 或删掉 height
注意：在 IE10–11 中，flex: 1 必须展开写成 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，否则不生效
慎用 flex-shrink: 0——它会让子项拒绝压缩，破坏等高逻辑