justify-content: center未居中是因为它只控制主轴对齐，而主轴方向由flex-direction决定：默认row时控制水平居中，column时控制垂直居中；在column下需用align-items: center实现水平居中。
Flexbox 不是加个 display: flex 就能正常工作的布局模型——容器属性和项目属性必须配对理解，漏掉主轴判断、误用对齐属性、或忽略 flex-wrap 默认值，都会导致布局错位、溢出或“看起来没反应”。
为什么 justify-content: center 没让元素水平居中？
常见现象：写了 justify-content: center，但子项还是靠左；或者在 flex-direction: column 下用了它，结果所有项目堆在顶部。
根本原因在于：justify-content 只控制主轴对齐，而主轴方向由 flex-direction 决定：
- 默认
flex-direction: row→ 主轴水平 →justify-content控左右 -
flex-direction: column→ 主轴垂直 →justify-content控上下（此时“居中”是垂直居中）
想在 column 布局下实现真正的水平居中？该用 align-items: center。记住口诀：justify = 主轴，align = 交叉轴。
flex-wrap: wrap 为什么没生效？
典型错误：给容器设了 display: flex 和 flex-wrap: wrap，但子项仍死扛在一行，甚至被压扁或溢出视口。
检查以下三点：
-
flex-wrap默认值是nowrap，必须显式写wrap才换行 - 换行后，
align-content才起作用；单行时它完全无效 - 子项若设置了固定宽度（如
width: 200px），又没配flex: 0 0 auto，可能因内容撑开导致换行失败
安全写法示例：.item { flex: 0 0 calc(50% - 8px); }（两列+ gap: 8px）
flex: 1 和 flex: auto 到底差在哪？
这两个值看着像都能“填满”，但行为完全不同：
-
flex: 1等价于flex: 1 1 0：基准为 0，从零开始均分剩余空间，无视内容宽度 -
flex: auto等价于flex: 1 1 auto：先按内容宽高占位，再把剩余空间按比例分配 -
flex: 0 0 auto是最保守的写法：不放大、不缩小、完全按内容尺寸渲染
卡片列表想等宽？别只写 flex: 1，先清掉子项上的 width，否则 flex-basis 被覆盖，flex: 1 就失效了。
怎么单独让某个子项在交叉轴上顶对齐？
align-items 是容器级属性，作用于所有子项；它无法单独控制某一个。
正确做法是在对应子项上设置 align-self：
-
align-self: flex-start→ 顶对齐（column 下）或左对齐（row 下） -
align-self: stretch→ 拉伸填满交叉轴（默认行为） - 该属性会覆盖容器的
align-items设置，且仅影响当前项目
复杂布局里，align-self 是打破统一对齐的关键出口，比改容器属性更精准、副作用更小。
Flexbox 的真正门槛不在属性数量，而在“容器定义主轴 → 项目响应主轴”这个双向依赖链。一旦主轴方向判断错，后面所有对齐、伸缩、换行逻辑都会翻转——这是最常被跳过、也最难调试的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
