flex-wrap必须显式设为wrap才能换行，因其默认值nowrap会导致子项强制单行溢出；配合flex-basis、flex-grow/shrink及媒体查询可实现可靠响应式布局。
flex 容器的 flex-wrap 必须显式设置才能换行
很多人以为给子元素设了 flex: 1 或固定宽度，容器就会自动在小屏下折行——其实不会。flex-wrap 默认是 nowrap，所有子项强行挤在同一行，导致横向溢出或内容被截断。
响应式中真正起作用的是：
-
flex-wrap: wrap：允许子项换行，配合min-width或flex-basis控制单行容纳数量 -
flex-wrap: wrap-reverse：换行但顺序倒置（少见，但做反向卡片流时有用） - 搭配媒体查询，在不同断点切换
flex-direction（如桌面横排row，手机竖排column）
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
<p>.grid > <em> {
flex: 1 1 calc(50% - 0.5rem); /</em> 两列布局，预留 gap 空间 */
}</p><p>@media (max-width: 768px) {
.grid > <em> {
flex: 1 1 100%; /</em> 手机端占满一行 */
}
}用 flex-grow / flex-shrink 替代固定像素宽度
写死 width: 200px 在缩放或小屏下极易破坏布局；而 flex-grow 和 flex-shrink 让元素按需伸缩，更符合响应式逻辑。
关键区别：
立即学习“前端免费学习笔记（深入）”；
-
flex-grow: 1：剩余空间按比例分配（多个元素都设为 1，则均分） -
flex-shrink: 0：禁止压缩（适合图标、头像等不能变小的元素） -
flex-basis是“基准尺寸”，不是最终宽度——它参与计算剩余空间，但可被flex-grow拉伸或flex-shrink压缩
常见错误：只写 flex: 1 却忽略 flex-basis 默认为 0%，导致所有元素从零开始均分空间，文字可能被压扁。
.header-actions {
display: flex;
gap: 0.5rem;
}
<p>.header-actions > button {
flex: 0 0 auto; /<em> 不伸缩，不压缩，按内容宽 </em>/
}</p><p>.header-actions > .search {
flex: 1 1 200px; /<em> 最小 200px，可拉伸填满剩余空间 </em>/
}移动端优先时，慎用 align-items: stretch
align-items: stretch（默认值）会让所有子项高度拉齐到容器最高项——在卡片列表中看似整齐，但在手机上常导致文字行数不一、留白失控，甚至触发意外滚动。
更可控的做法：
- 卡片类布局统一用
align-items: flex-start，让顶部对齐，高度由内容决定 - 需要底部对齐操作按钮时，用
margin-top: auto推下去，比align-items: flex-end更精准 - 避免在 flex 容器里嵌套另一个 flex 并依赖
stretch，容易出现高度嵌套失效
.card-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
<p>.card {
display: flex;
flex-direction: column;
align-items: flex-start; /<em> 不拉伸高度 </em>/
}</p><p>.card .actions {
margin-top: auto; /<em> 底部按钮自动下沉 </em>/
}IE11 兼容性问题：flex: 1 的 fallback 写法
IE11 对 flex 缩写支持不一致，尤其 flex: 1 会被解析为 flex: 1 1 0%，导致子项宽度归零。必须显式写出三值才稳定。
实操建议：
- 不用
flex: 1，改用flex: 1 1 0px或flex: 1 1 auto - 对 IE11 单独加前缀：
-ms-flex: 1 1 0px - 如果项目必须兼容 IE11，禁用
gap，改用margin模拟，因为 IE11 完全不支持gap
.ie-flex-fix {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
<p>.ie-flex-fix > * {
-ms-flex: 1 1 0px;
flex: 1 1 0px;
}实际做响应式 flex 布局时，最常被忽略的是 flex-basis 的语义——它不是“最小宽度”，而是参与剩余空间计算的起点；还有就是 flex-wrap 不设就永远不换行，这点在调试横向溢出时要第一时间检查。
