Flexbox实现响应式布局的关键在于正确使用flex、flex-wrap和align-items三属性，而非依赖媒体查询；flex:1等价于flex-grow:1、flex-shrink:1、flex-basis:0，使子项协商剩余空间，自动收缩不溢出。
Flexbox 实现响应式布局的关键不在“加媒体查询”，而在于用对 flex、flex-wrap 和 align-items 这三个属性——它们本身就能应对多数断点变化，媒体查询只是补充。
flex: 1 不等于 width: 33.33%
直接写 width: 33.33% 在小屏下容易撑破容器，或被浏览器强制最小宽度（比如 min-width: auto）卡住；而 flex: 1 让子项“协商”剩余空间，自动收缩不溢出。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，基线为 0，增长收缩都基于容器可用空间 - 需要不等比分配？改用
flex: 2和flex: 1，比例稳定，不受字体、边框、padding 干扰 - 切忌同时设
flex和width：Safari 中width会覆盖flex-basis，导致布局错乱
flex-wrap: wrap 是响应式断行的开关
单行 display: flex 在手机上挤成一团，不是 Flex 不行，是没开换行。只要加 flex-wrap: wrap，子项就会在空间不足时自动折行，无需手动写媒体查询。
- 配合
gap: 16px控制项目间距，现代浏览器支持良好（IE 不支持，需 fallback） - 若需小屏堆叠为单列，可加媒体查询：
@media (max-width: 768px) { .container { flex-direction: column; } } - 注意：IE11 不识别
flex: 1的简写，得拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;
align-items: center 不能解决所有对齐问题
表单里 label 和 input 看似“不对齐”，往往不是位置偏移，而是默认基线（baseline）和弹性轴对齐方式冲突所致。
立即学习“前端免费学习笔记（深入）”；
-
align-items: center对大多数单行控件有效，但遇到多行文本标签（如带帮助说明的label），会把 input 拉高 - 此时应改用
align-items: flex-start，再给input单独加margin-top: auto微调 -
vertical-align: middle在 Flex 容器中完全无效，且不同字体下偏移量不可控，别碰
真正难处理的是混合内容高度差异大 + 跨浏览器兼容（尤其 IE11），这时候 flex-basis 的取值、min-width 的隐式限制、以及是否启用 box-sizing: border-box，都会悄悄改变布局结果。动手前先检查这些细节，比反复调 margin 更省时间。
