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;
}
.grid > {
flex: 1 1 calc(50% - 0.5rem); / 两列布局，预留 gap 空间 */
}
@media (max-width: 768px) {
.grid > {
flex: 1 1 100%; / 手机端占满一行 */
}
}
用 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%，导致所有元素从零开始均分空间，文字可能被压扁。
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
.header-actions {
display: flex;
gap: 0.5rem;
}
.header-actions > button {
flex: 0 0 auto; / 不伸缩，不压缩，按内容宽 /
}
.header-actions > .search {
flex: 1 1 200px; / 最小 200px，可拉伸填满剩余空间 /
}
移动端优先时，慎用 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;
}
.card {
display: flex;
flex-direction: column;
align-items: flex-start; / 不拉伸高度 /
}
.card .actions {
margin-top: auto; / 底部按钮自动下沉 /
}
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;
}
.ie-flex-fix > * {
-ms-flex: 1 1 0px;
flex: 1 1 0px;
}
实际做响应式 flex 布局时，最常被忽略的是 flex-basis 的语义——它不是“最小宽度”，而是参与剩余空间计算的起点；还有就是 flex-wrap 不设就永远不换行，这点在调试横向溢出时要第一时间检查。
