flex容器必须设为display: flex或inline-flex，否则子元素flex属性无效；子项宽度靠flex-grow与flex-basis配合，flex: 1等价于flex: 1 1 0%，非“占满”；高度自适应需确保父级有明确高度，推荐min-height: 100vh；flex-wrap不控制列数，order影响视觉顺序但不利seo；flex-shrink: 0易致横向溢出。
flex容器必须设为display: flex或inline-flex
不声明这个，子元素的flex相关属性（如flex-grow、flex-basis）完全无效。常见错误是只给子项加flex: 1却忘了父容器没开启Flex上下文。
实际使用中建议统一用display: flex，除非明确需要行内级容器；display: inline-flex在嵌入文本流时才有意义，但多数响应式布局用不到。
子项宽度自适应靠flex-grow和flex-basis配合
flex-grow控制剩余空间如何分配，flex-basis才是初始尺寸基准。很多人误以为flex: 1等于“占满”，其实它等价于flex: 1 1 0%——也就是从0开始拉伸，可能造成内容被压缩。
- 想让子项按内容宽度自然展开，用
flex: 0 1 auto（不放大、可缩小、基线为内容宽） - 想等比均分剩余空间，用
flex: 1（等价于flex: 1 1 0%） - 想固定最小宽度再弹性扩展，比如导航栏按钮，写成
flex: 1 1 120px
高度自适应要解决容器高度丢失问题
Flex容器默认不继承父高度，height: 100%在没有显式父高时无效。常见于全屏布局：如果html和body没设height: 100%，min-height: 100vh更可靠。
立即学习“前端免费学习笔记（深入）”；
垂直居中常搭配align-items: center或align-self，但注意：只有当容器有明确高度（比如height: 500px或min-height: 100vh）时，这个居中才真正起作用。
响应式断点里慎用flex-wrap和order
flex-wrap: wrap会让子项换行，但别指望它自动“适配三栏变两栏再变一栏”——它只按容器宽度是否容得下当前子项来判断，不识别列数逻辑。真要控制列数，得结合媒体查询改flex-basis。
order能重排视觉顺序，但语义顺序不变，对SEO和屏幕阅读器不友好；移动端把侧边栏order: -1提到顶部虽方便，但需确认是否影响可访问性要求。
最易被忽略的是flex-shrink: 0在小屏下的副作用：一旦设了，子项宁可溢出也不缩小，经常导致横向滚动条意外出现。