Flexbox 布局失效主因是父容器未正确触发 Flex 上下文；需检查 display: flex 是否被 inline、none 或 float 覆盖，并注意 IE11 兼容性及 min-width/min-height 设置。
Flexbox 布局写不稳？先检查 display: flex 的父容器是否真正生效
很多“弹性布局没反应”的问题，其实卡在最外层容器没正确触发 Flex 上下文。Sass 封装再漂亮，display: flex 没挂上去等于白搭。
常见错误现象：justify-content 或 align-items 完全不生效，子元素还是块级堆叠；用浏览器 DevTools 看父元素 computed 样式里压根没有 display: flex。
- 确认父元素不是
display: inline或display: none—— 这两类会直接让display: flex失效 - 避免在同一个元素上同时写
display: flex和float，后者会让前者退化为display: block - Sass 中用
@mixin生成display: flex时，别漏掉flex-direction默认值（row），否则垂直布局容易误判
Sass @mixin flex-center 怎么写才不踩 align-items 和 justify-content 的歧义坑
flex-center 听起来很直白，但实际项目里它常被默认理解成“居中内容”，而 CSS 中 justify-content 控制主轴、align-items 控制交叉轴——方向取决于 flex-direction。
使用场景：按钮内图标文字居中、卡片内容垂直水平居中、模态框居中等。
立即学习“前端免费学习笔记（深入）”；
- 不要只写
justify-content: center; align-items: center就完事——如果父容器设了flex-direction: column，那“水平居中”其实是靠align-items实现的 - 更稳妥的封装是分两个 mixin：
@mixin flex-align-center（专注交叉轴）和@mixin flex-justify-center（专注主轴），语义清晰，复用也灵活 - 注意 Safari 旧版本对
align-content: center（多行 flex）支持不稳定，单行布局优先用align-items
用 @mixin flex-between 排版导航栏时，为什么右边元素总被挤出容器？
典型表现：导航项用 justify-content: space-between，但右侧 login 按钮跑到了视口外，或被折叠隐藏。
根本原因不是 space-between 本身，而是它依赖“容器有明确宽度”且“子元素不溢出”。Flex 不会自动收缩内容来适配空间。
- 给右侧元素加
margin-left: auto通常比space-between更可控——它不依赖子项数量，也不怕最后一项超宽 - 如果坚持用
space-between，确保所有子项的flex-shrink: 0（尤其含图片或长文本的项），否则它们会被压缩变形 - 移动端响应式中，
flex-wrap: wrap+space-between容易导致换行后首尾不对齐，此时改用margin-left: auto配合媒体查询更稳
Sass 中用 @mixin 封装 flex-grow/flex-basis 时，为什么 IE11 下完全失效？
IE11 对 Flexbox 的实现残缺，尤其是 flex 简写属性（如 flex: 1）解析错乱，常表现为子项不伸缩、高度塌陷或顺序错乱。
性能与兼容性影响：加前缀不能解决本质问题，IE11 的 Flex 引擎根本不识别某些组合值。
- 避免在 mixin 中输出
flex: 1或flex: 0 1 auto—— 改用显式三属性：flex-grow、flex-shrink、flex-basis，并单独加-ms-前缀 - IE11 下
flex-basis: auto表现异常，建议统一写成具体值，比如flex-basis: 0配合flex-grow: 1 - 真要全面兼容 IE11，不如把关键布局降级为
display: table-cell或float，Flex 只作为增强——Sass mixin 可通过$legacy-support: true开关控制输出逻辑
复杂点在于：Flex 的行为高度依赖上下文（方向、换行、内容尺寸），Sass 封装只能固化语法，没法替你判断布局意图。最容易被忽略的是 min-width: 0 和 min-height: 0 ——它们才是解决 flex 子项内部文本溢出、图片撑开的真正开关，但几乎没人把它塞进 mixin 里。
