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更可靠。
立即学习“前端免费学习笔记（深入）”；
