多列布局高度不一致是正常行为，因其本质为内容流式分段，不支持align-items等flex属性；需等高应改用Flexbox或Grid实现。
多列高度不一致是正常行为，不是 bug
CSS 多列布局（column-count 或 column-width）本质是**内容流式分段**，不是网格或 flex 容器。它不会拉伸子元素高度，也不支持 align-items —— 这个属性根本不在多列上下文里生效。试图用 flexbox 的 align-items: stretch 去“修复”多列高度，属于错配容器模型。
想让各列等高？别用 columns，改用 display: flex
真正可控的等高多列，得靠 Flexbox 或 Grid。Flex 是最直接的替代方案：
.equal-height-cols {
display: flex;
gap: 1rem;
}
.equal-height-cols > * {
flex: 1;
min-width: 0; /* 防止内容撑宽导致换行 */
}-
flex: 1让子项均分剩余空间，自动等宽 + 等高（默认align-items: stretch） - 必须显式设置
min-width: 0，否则图片、长单词等可能破坏等宽逻辑 - 不支持响应式断行（比如从 3 列变 1 列），需配合
@media手动切回flex-direction: column
如果必须保留多列语义（如长文本分栏），就接受高度差异
新闻/文档类排版中，columns 的价值在于浏览器原生分页逻辑（含跨列浮动、避让），此时等高反而破坏可读性。常见应对方式：
- 用
break-inside: avoid防止单个块被劈成两半（但不能强制列等高） - 避免在列内使用
height、min-height等干扰自然流的声明 - 若需视觉对齐，用背景色 +
padding-bottom模拟“底边齐平”，而非真等高
align-items: stretch 只在 flex 容器里有效，且只作用于直接子项
这个属性不会穿透嵌套层级，也不会影响 columns。常见误用场景：
立即学习“前端免费学习笔记（深入）”；
/* ❌ 无效：外层是 columns，内层 flex 无法拉伸到列高 */
.container {
columns: 3;
}
.container > .item {
display: flex;
align-items: stretch; /* 它只拉伸自己内部的子元素，和列高无关 */
}-
align-items的基准是**flex 容器自身高度**；如果容器没设高，它由内容撑开，stretch就无意义 - 想让 flex 子项填满整个视口高度？得给容器加
height: 100vh或min-height: 100vh - 多列容器本身没有“列高”这个 CSS 属性，所有列高都是计算值，不可直接读取或设置
多列布局和等高需求本质上是矛盾的设计目标。选 columns 就接受流式高度，选等高就换 Flex/Grid —— 没有中间解，强行混用只会增加不可预测性。
