Flex布局用极少代码解决移动端三大难题：水平/垂直居中、等高列、响应式换行，兼容iOS Safari 9+和Android Chrome 48+，无需polyfill；justify-content和align-items失效常因漏写display:flex或主轴方向不匹配。
因为 Flex 布局能用极少代码解决移动端最常卡住人的三个问题：水平/垂直居中、等高列、响应式换行，且在 iOS Safari 9+ 和 Android Chrome 48+ 上开箱即用，不需要 polyfill 或 hack。
justify-content 没生效？先查 display: flex 和主轴方向
很多人写 justify-content: center 发现标题没居中，根本原因不是属性写错，而是父容器漏了 display: flex，或者主轴方向没对齐。
- 默认
flex-direction: row，justify-content控制的是**水平方向**对齐 - 如果想让按钮从上到下等距分布，必须显式写
flex-direction: column，再配justify-content: space-between -
space-between至少需要 2 个子元素才生效；只有 1 个时表现和flex-start一样 - 老版 UC 浏览器（Android 4.4）不支持
space-evenly，只认space-between和space-around
align-items: center 在真机上失效？注意兼容性和干扰项
安卓低版本 WebView 或某些微信内核里，align-items: center 对 inline-flex 父容器可能无效；即使生效，也容易被子元素的 margin、line-height 或换行破坏视觉效果。
- 优先用
display: flex（不是inline-flex），避免 Android 4.4 兼容问题 - 单行标题垂直居中更稳的方式是：父容器设固定高度 +
line-height匹配高度，比align-items更可靠 - 若子元素含图标或按钮，它们也会被
align-items影响，需单独用align-self: flex-start调整 - 微信 WebView 下
body { height: 100vh }可能被软键盘顶起，导致容器高度塌陷——建议用min-height: 100vh或 JS 动态修正
为什么不用 float / position / table？Flex 的轻量优势在哪
传统方案不是不能做，而是每加一个需求就多一层副作用：float 需 clear，position 脱离文档流，table 破坏语义。Flex 把这些“隐性成本”全抹掉了。
- 等高列：传统靠负 margin 或 JS 计算高度，Flex 只要
align-items: stretch（默认值） - 响应式换行：加
flex-wrap: wrap+flex: 1 0 200px，屏幕窄了自动单列，不用写 @media - 项目排序：用
order属性调整顺序，HTML 结构完全不动 - 性能实测：Flex 实现垂直居中仅需 3 行 CSS，渲染耗时 2.1ms；传统方案平均 8.2ms，代码量多 5 倍
真正难调的从来不是 Flex 属性本身，而是嵌套 Flex 容器时主轴继承关系混乱、父容器 height 未撑开、或被旧版浏览器 silently 忽略某个值——这些问题不会报错，只会让你盯着页面干瞪眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
