Flexbox 的五个反直觉行为

一、flex item 的 min-width 不是 0

默认是 auto，意思是「不小于内容宽度」。所以里面放个长代码块，整个 flex 布局就撑破了。

.flex-child { min-width: 0; }

记住这条，能解决一半的「flex 溢出」问题。

二、margin: auto 会吃掉多余空间

.item { margin-left: auto; }

这一行等效于「推到最右边」，比 justify-content: space-between 在单项场景下更好用。

三、align-items 默认 stretch 会拉伸

不是 flex-start。如果子项没有固定高度，它会被拉满容器。想要不被拉伸：

.container { align-items: flex-start; }

四、百分比高度常常失效

因为父容器没高度。链路上任何一层是 height: auto，百分比就退化成 auto。

五、flex-basis 优先级高于 width

.item {
  width: 200px;
  flex-basis: 300px;  /* 这个赢 */
}

如果只想让 width 生效，就别写 flex-basis，或者写成 flex-basis: auto。

小结

flex 不难，难的是默认值。把上面五条写进肌肉记忆，写页面会顺很多。