CSS Flexbox卡点在于交叉轴对齐失效、flex-wrap与align-content配合失灵、min-width: auto导致收缩、表单控件默认min-width挤压；需设父容器交叉轴尺寸、用flex-basis: 0、min-width: 0及gap等解法。
别信“100条经验”这种标题——CSS弹性盒子（Flexbox）真正卡住人的，就那三四个地方：交叉轴对齐失效、flex-wrap和align-content配合失灵、子项min-width: auto导致的意外收缩、以及在表单控件里用display: flex触发的默认min-width挤压。
为什么align-items设了却没生效？
常见错误是父容器没设height或高度由内容撑开，而align-items只在交叉轴有“可用空间”时才起作用。比如垂直居中一个按钮，父元素div若没明确height或min-height，且子项没换行，那交叉轴就是“刚好够用”，根本没空间可居中。
- 确认父容器在交叉轴方向有明确尺寸（如
height: 100vh、min-height: 200px）或使用align-content: center配合flex-wrap: wrap - 检查是否误用了
align-self在子项上覆盖了父级设置 - 注意
flex-direction: column时，交叉轴变成水平方向，align-items控制的是左右对齐，不是上下
flex: 1让子项撑满却溢出容器？
这是flex-basis默认值auto惹的祸。flex: 1等价于flex: 1 1 auto，而auto会先按子项内容宽度计算基础尺寸，再分配剩余空间——如果内容本身很宽（比如长文本、未设max-width的图片），就会撑破父容器。
- 改成
flex: 1 1 0（即flex-basis: 0），强制从零开始均分剩余空间 - 对可能过长的子项加
min-width: 0（尤其含文本的div），防止浏览器强行维持最小内容宽度 - 表单控件如
input、select默认有min-width，需显式设min-width: 0才能被flex正常压缩
flex-wrap: wrap后align-content不居中？
align-content只在多行（或多列）且交叉轴有**额外空间**时才生效。如果所有行加起来刚好填满容器高度，或者只有一行，它就完全没反应。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器交叉轴尺寸 > 所有flex行总高度（比如设
height: 400px，但两行总共只占200px） - 用
gap代替margin控制行间距，避免因外边距干扰空间计算 - Chrome 115+ 支持
align-content: space-evenly，但Safari 16.4前不支持，旧版需回退到space-between+ 额外空项模拟
在form里用display: flex布局表单控件，为啥错位或挤成一团？
原生表单控件（input、textarea、button）在Flex容器中会表现出两个顽固特性：一是默认min-width: min-content，二是部分浏览器给input设了硬编码的min-width: 130px（尤其Chrome）。
- 统一给表单控件加
min-width: 0，解除默认最小宽度锁定 - 用
width: 0; flex: 1替代单纯flex: 1，更可靠地触发弹性伸缩 - 避免对
label和input同时设flex，优先用display: grid处理label+control组合，Flex更适合纯控件横向排列
Flexbox的“高级”不在属性多，而在每个属性背后都藏着浏览器渲染引擎对尺寸、最小约束、基线对齐的隐式判断。调不通的时候，先关掉min-width和flex-basis的默认行为，比查文档更快。
