justify-content控制主轴对齐（方向由flex-direction决定），align-items控制交叉轴单行对齐，默认stretch拉伸，align-content仅在flex-wrap换行的多行容器中生效，作用于行间对齐。
justify-content 管主轴，align-items 管交叉轴——这是弹性容器对齐的底层逻辑，别记反，也别指望它自动“猜”你想怎么对齐。
justify-content 控制主轴对齐（水平还是垂直，看 flex-direction）
它只作用于主轴方向，而主轴方向由 flex-direction 决定：row（默认）是水平主轴，column 就变成垂直主轴。
-
justify-content: center：项目在主轴中间对齐（比如flex-direction: row时是水平居中；column时是垂直居中） -
justify-content: space-between：首尾贴边，中间等距——但注意，它不处理项目自身尺寸，只分配剩余空间 -
justify-content: flex-start和flex-end比start/end更可靠，尤其在 RTL（右向左）语言环境里，后者可能随书写模式变化 - 如果主轴是
column且你写了justify-content: center，但容器没设height或min-height，页面上根本看不到“居中”效果——因为容器高度塌陷了
align-items 控制交叉轴对齐（常被误当“垂直居中”用）
align-items 默认值是 stretch，它会让项目拉伸填满交叉轴 —— 但前提是父容器在该轴上有明确高度（或宽度，取决于方向）。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
align-items: center真正起效的前提：父容器在交叉轴方向有可参考的尺寸。例如flex-direction: row时，交叉轴是垂直方向，所以父容器得有height或min-height -
align-items: stretch对没有显式height的子元素才生效；一旦子元素写了height: 100px，它就不再被拉伸 - 在
flex-direction: column下，align-items: center是让所有项目水平居中——不是“上下居中”，这点初学者容易混淆 - 如果项目本身有
margin或border，align-items: center对齐的是内容框（content box），不是外边距边缘
align-content 什么时候才起作用？
align-content 只在**多行弹性容器**中生效（即 flex-wrap: wrap 且子项实际换行了）。单行容器里设它完全无效。
- 常见误用：
flex-direction: column; align-content: center—— 如果只有一列、没换行，这个设置等于没写 - 它控制的是“行”与“行”之间的对齐，不是“项目”与“项目”之间
- 取值如
space-between、center等，行为类似justify-content，但作用对象是“行块”而非单个项目
真正卡住人的地方，从来不是属性名记不住，而是忘了 flex-direction 切换后，主轴/交叉轴角色互换，而 justify-content 和 align-items 的语义不会跟着变——它们永远忠于轴线定义，不忠于你的直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
