Flex子项高度不一致时默认行为是align-items: stretch使无显式高度的子项拉伸至容器高度，但设height/min-height的子项不受影响；需容器有明确高度且子项不设height才能统一拉伸。
flex 子项高度不一致时默认行为是什么
Flex 容器中子元素高度不一致，本质是 align-items 的默认值 stretch 在起作用——它会让所有子项在交叉轴（通常是垂直方向）上拉伸至容器高度。但这个“拉伸”只对**未设置明确高度**的子项生效；一旦某个子项写了 height: 200px 或 min-height: 100px，它就不再被拉伸，导致视觉上高度参差。
用 align-items: stretch 拉伸所有子项到统一高度
这是最直接的对齐方式，但前提是子项不能有硬编码的高度限制，且父容器要有确定高度（否则 stretch 无参照）。
-
flex容器需有明确高度，例如height: 300px或min-height: 300px - 所有子项不能设
height、max-height（会截断拉伸），但可设min-height（不影响 stretch） - 若子项含内容溢出，需配合
overflow: hidden或word-break: break-word防止撑高
.container {
display: flex;
height: 240px;
align-items: stretch;
}
.item {
flex: 1;
/* 不要写 height */
padding: 12px;
border: 1px solid #ccc;
}用 align-items: flex-start 配合固定高度控制整齐外观
当内容长度天然不同、又不想拉伸破坏布局时，更稳妥的做法是放弃拉伸，转而统一子项自身高度。这时 align-items: flex-start（默认值）让子项顶部对齐，再靠 height + overflow 控制视觉一致性。
word报告自动生成神器
下载
Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。
- 给每个子项设置相同
height，如height: 160px - 用
overflow: hidden裁剪多余内容，或display: -webkit-box实现多行省略 - 若需保留可滚动，改用
overflow-y: auto，但注意滚动条会占用空间 - 慎用
min-height单独设置——它允许子项更高，仍会导致不一致
.container {
display: flex;
align-items: flex-start;
}
.item {
flex: 1;
height: 160px;
overflow: hidden;
padding: 8px;
border: 1px solid #ddd;
}flex: 1 和 height 冲突时谁优先
当子项同时有 flex: 1 和 height: 200px，height 是初始主轴尺寸，在 flex-direction: row 下影响宽度，在 column 下才影响高度。但真正决定最终尺寸的是 flex-basis ——它默认取 height（column）或 width（row），所以冲突实际发生在 flex-basis 和 height 之间。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0，其中0是flex-basis，会忽略height - 想让
height生效，得显式写flex: 1 1 auto或flex-basis: auto - 更安全的做法：不用
flex: 1，直接用flex: 1 1 200px显式声明基准高度
这点容易被忽略：看着写了 height，结果因为 flex: 1 的 flex-basis: 0 被覆盖，子项反而塌缩或异常拉伸。
