Flex布局是初学者应优先掌握的页面骨架搭建工具，需先规划header/main/footer三块结构，用flex-direction:column和flex属性控制伸缩，再逐层用flex处理导航、卡片等模块，通过justify-content和align-items精准对齐。
页面布局总“乱”，不是你代码写得差，而是缺了一套清晰的结构规划思路。Flex 布局不是万能解药，但它是初学者最该先掌握的“骨架搭建工具”——它不依赖浮动、不靠负边距、不用猜父容器高度，只要理解主轴和交叉轴，就能稳住大框架。
先画出“三块布”：header / main / footer
别一上来就写导航栏样式或卡片细节。打开编辑器前，先在纸上（或脑中）把页面切成三横条：顶部区域（header）、主体内容区（main）、底部区域（footer）。这三块就是 Flex 最适合控制的“一级容器”。
- 给 body 或一个最外层 div 设置 display: flex 和 flex-direction: column
- 再给每个区域设 flex: 0 0 auto（不伸缩、不压缩、按内容高度）或 flex: 1（让 main 占满剩余空间）
- 这样即使内容增减，header 和 footer 也不会被挤跑，main 也不会塌陷
内部模块用 flex 包一层，别直接塞进 body
常见错误：把 logo、nav、search 全堆在 body 里，然后用 margin 拼位置。结果一换屏幕尺寸就错位。正确做法是——每个逻辑区块（比如导航栏）单独包一个 div，再对这个 div 开启 flex。
- 例如导航栏：.nav { display: flex; justify-content: space-between; align-items: center; }
- 左边放 logo，右边放菜单，中间自动留白；垂直居中一行搞定，不用 line-height 猜高度
- 所有子元素默认在同一行排列，不再需要 float: left 或 inline-block + vertical-align
卡片列表？用 flex-wrap 配合 flex-basis
想让 3 张卡片在桌面端横排、手机端竖排？别急着写媒体查询。先用 flex 让它们“自己排队”：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加 display: flex; flex-wrap: wrap;
- 每张卡片设 flex: 0 0 calc(33.333% - 20px);（减去间隙），再用 gap 控制间距
- 当屏幕变窄，单张卡片宽度超限，flex-wrap 就会自动折行——比 media query 更轻量、更响应
对齐总不对？检查两个轴的方向和默认值
justify-content 控制主轴（默认水平），align-items 控制交叉轴（默认垂直）。新手常混淆的是：为什么文字没居中？可能因为容器没设高度，或者忘了 align-items 是作用于子项整体，不是子项里的文字。
- 居中一个按钮？父容器 display: flex; justify-content: center; align-items: center;
- 文字本身居中？还得在按钮上加 text-align: center;
- 子项高度不一致？试试 align-items: stretch;（默认值）或 flex-start
