一、横向排列的核心原理
为什么选择 Flex 布局实现横向排列
在现代前端布局中，Flexbox 提供了高效的横向对齐和纵向对齐能力。通过将父容器设置为 display: flex，子项默认就能在水平方向上排列，并且能够自适应高度以适应内容。使用flex-direction: row可以确保子 DIV 横向从左到右排列。若没有手动设置高度，父容器的高度会随着子项中的最大高度自动扩展，这就是所说的自适应高度。
此外，flex-wrap 允许子项在容器不足时换行或保持在同一行。掌握这几个属性组合后，可以在不使用浮动和定位的情况下实现稳定的横向布局与自适应高度。
要点总结：display: flex 将父容器转变为弹性盒模型；flex-direction: row 控制主轴方向为水平方向；height: auto 在没有设定具体高度时，容器会自适应高度；align-items 配合子项高度，决定对齐方式与是否拉伸。
/* 基本横向排列且自适应高度的容器示例 */
.flex-row {display: flex;flex-direction: row;align-items: stretch;gap: 12px;
}如何控制换行行为
如果子项数量较多，且希望在容器宽度受限时自动换行，可以加入 flex-wrap: wrap。这时，容器高度会随多行内容而增加，仍保持横向排列的特性。
/* 支持多行换行的横向布局 */
.flex-wrap {display: flex;flex-direction: row;flex-wrap: wrap;gap: 12px;
}二、基础属性与常用组合
关键属性及其作用
最常用的组合是 display: flex、flex-direction: row、以及 gap 来在子项之间创建固定间距。align-items: stretch 可以让子项在垂直方向上拉伸以填满容器高度，保证横向排列的整齐。若需要让子项保持自定义高度且不拉伸，可以改用 align-items: flex-start。
以下 CSS 片段展示了一个典型的横向排列且自适应高度的父容器：
.flex-row {display: flex;flex-direction: row;gap: 12px;align-items: stretch; /* 或 flex-start，根据需求选择 */
}如何控制换行行为
如果子项数量较多，且希望在容器宽度受限时自动换行，可以加入 flex-wrap: wrap。这时，容器高度会随多行内容而增加，仍保持横向排列的特性。
.flex-wrap {display: flex;flex-direction: row;flex-wrap: wrap;gap: 12px;
}三、实战示例：完整代码演示
HTML 结构
一个简单的横向容器包含若干子 DIV，每个子 DIV 可以设定不同高度，以演示自适应高度的效果。关键要点在于让父容器成为 flex 容器，而子 DIV 则作为弹性项目。
<div class="flex-row" aria-label="横向排列的子元素"><div class="item" style="height:60px; background:#8ecae6;">A</div><div class="item" style="height:100px; background:#219ebc;">B</div><div class="item" style="height:80px; background:#023047;">C</div>
</div>在上述示例中，父容器设为 display: flex，子项设定不同高度。由于容器高度会随内容而变化，表现为自适应高度；若采取 align-items: stretch，子项也会被拉伸以匹配最大高度，视觉上更整齐。
CSS 样式
下方样式将实现横向排列、并保持容器对齐一致性的效果。你可以通过 gap 调整间距，通过 justify-content 进一步控制主轴对齐方式。
.flex-row {display: flex;flex-direction: row;gap: 12px;align-items: stretch; /* 若要让子项高度一致，请保持此项为 stretch */padding: 8px;border: 1px solid #ddd;
}
.flex-row .item {padding: 8px 12px;color: #fff;font-weight: bold;border-radius: 4px;
}通过上述代码，子 DIV 将在水平方向上横向排列，并且父容器的高度会自适应子项中的最高高度；如果你想让容器高度仅由第一行决定，并且第二行换行，请启用 flex-wrap: wrap，并相应设置每行的高度。
四、实用技巧与浏览器兼容性注意事项
跨浏览器兼容性要点
现代浏览器对 Flexbox 的支持良好，但在旧版浏览器中，flexbox 语法差异 可能导致布局异常。使用 prefix-free 或者合规的祖先 CSS 规则可以提升兼容性。对大多数项目来说，直接使用 display: flex、flex-direction、以及 gap 已足够。
当你遇到子项高度不一致导致布局错位时，优先检查是否设置了固定高度，或是否使用了 min-height、max-height 等约束，这些都可能破坏自适应高度的特性。
调试技巧
使用浏览器开发者工具的 布局边界 和 弹性盒模型 视图，可以清晰看到主轴和交叉轴之间的关系，以及各子项的实际高度。微调 gap、margin 与 padding，以实现想要的紧密度。
