水平分布对齐取决于布局上下文：Flexbox用justify-content，Grid用justify-content或justify-items，传统块流基本不支持；Flexbox中justify-content是最常用且语义最清晰的方式，父容器需设display: flex，子项默认生效。
直接说结论：水平分布对齐不是靠 text-align 或单个元素的 margin: auto，而是取决于你用什么布局上下文——Flexbox 用 justify-content，Grid 用 justify-content 或 justify-items，传统块流则基本不支持“分布”，只能靠 hack。
Flexbox 中用 justify-content 实现子项水平分布
这是最常用、语义最清晰的方式。父容器必须是 display: flex，且子项默认为 flex 项目（无需额外设置）。
-
justify-content: flex-start（默认）：所有子项挤在左侧 -
justify-content: flex-end：全部靠右 -
justify-content: center：整体居中（不是每个子项居中） -
justify-content: space-between：首尾贴边，中间等距；注意第一个和最后一个子项紧贴容器边缘 -
justify-content: space-around：每个子项两侧留半倍间距，视觉更平衡 -
justify-content: space-evenly：所有间距（包括首尾外侧）完全相等，兼容性略差（IE 不支持）
常见错误：忘了设 display: flex，或把 justify-content 写在子元素上（它只对 flex 容器生效）。
Grid 布局中控制水平分布的两种写法
Grid 更适合二维场景，但水平分布同样可控，且粒度更细。
- 整行分布：在容器上设
display: grid+justify-content: center（对齐整行轨道），适用于grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))这类响应式列 - 单个格子内容对齐：对子项设
justify-self: end，可单独让某个卡片右对齐，不影响其他项 - 注意：如果用了
grid-template-columns: 1fr 1fr 1fr，子项默认会拉伸填满，此时justify-self才显效果；若子项有固定宽，则需配合justify-items: start/center/end控制默认行为
容易踩的坑：justify-content 在 Grid 中作用于“轨道外部”，不是内容内部；而 justify-items 才控制每个格子内内容的水平位置。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
不用 Flex/Grid 时，水平分布几乎不可靠
纯块级流（display: block）下，没有原生“分布”概念。有人试过 text-align: justify + 伪元素撑开，或浮动 + 负 margin 模拟 space-between，但这些方案：
- 依赖固定数量子项，增删后易错位
- 无法响应式重排（比如从 4 列变 2 列时，间距逻辑崩坏）
-
text-align: justify对最后一行无效，还得加::after补空白 - IE 兼容性差，现代项目不值得投入维护成本
如果你被要求“必须不用 Flex/Grid”，那本质上是在对抗 CSS 标准 —— 不是做不了，而是代价远高于收益。
真正容易被忽略的是：分布对齐的效果高度依赖父容器宽度是否确定、子项是否换行（flex-wrap: wrap 会改变 justify-content 的行为）、以及是否设置了 min-width 导致子项无法压缩。调不对时，先检查这三项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
