grid项需设min-width: 0才能让内部flex容器正常收缩，否则双重最小尺寸保护会撑乱布局；flex子项、图片、文本等也需各自设置min-width: 0并配合overflow/white-space等属性才能正确截断或缩放。
Grid容器内的flex子元素变形，根本不是Flex写错了，而是两层“最小尺寸保护”叠加导致的——Grid项默认min-width: auto，它里面的Flex容器也默认min-width: auto，内容（比如长文本、图片）就一路顶开轨道，撑乱整个布局。
Grid项没设min-width: 0，Flex容器就失去收缩权
Grid子元素（即Grid Item）默认会按内容宽度伸展，哪怕你写了grid-template-columns: 1fr 1fr，它也会把轨道撑宽。Flex子元素嵌在里面时，这个“撑”是双重的：Grid项先撑，Flex容器再撑一次。
- 必须给Grid项显式加
min-width: 0（横向布局）或min-height: 0（纵向布局），否则overflow: hidden和text-overflow: ellipsis全无效 - 仅给Flex容器加
min-width: 0不够——它得先从Grid项那里“继承”到可收缩的前提 - DevTools里看Computed值，确认
min-width确实是0px，而不是显示为auto或几百像素
Flex子项本身也需min-width: 0，尤其含长文本或图片
就算Grid项已设min-width: 0，如果它内部是display: flex，而Flex子项（如div或img）没加min-width: 0，长URL、无空格字符串或大图仍会把它顶开。
-
min-width: 0只对Flex容器的**直接子元素**生效，不能写在祖父级上 - 图片要稳住，推荐组合：
flex: 0 0 auto+width: auto+height: auto+min-width: 0 - 文字截断场景，
white-space: nowrap和overflow: hidden必须配合min-width: 0才触发省略号，否则只是“藏起来但盒子还在变大”
align-items: stretch在嵌套中悄悄拉高Flex子项
Flex默认align-items: stretch，在flex-direction: row下会让所有子项（包括img）强行填满Grid项高度。这不是变形，是垂直方向的强制拉伸，常被误认为“图片糊了”。
- 解除方式很简单：Flex容器上加
align-items: flex-start或center - 如果Flex是
column流向，交叉轴变成水平方向，此时要改justify-content或确保min-width: 0已作用在正确层级 -
align-self可单控某个子项，但前提是该子元素是Flex容器的直接子节点
用gap代替margin，避免间距逻辑冲突
Grid容器里混用margin和gap，或Flex里用space-x-类，会导致间距计算失效——gap被静默忽略，margin又不受Grid轨道约束，最终表现为子元素挤在一起或错位。
- Grid容器统一用
gap，Flex容器也统一用gap（现代浏览器全覆盖） - Tailwind的
space-x-在嵌套中完全无效，别指望它在Grid项里的Flex容器中起作用 - 响应式切换时，避免Grid用
gap、移动端Flex切回margin——数值难对齐，:not(:last-child)在flex-wrap下也不可靠
最常被跳过的动作，是在DevTools里逐层点开Computed面板，确认每一层的min-width和flex-shrink是否真的生效。写对了CSS不等于浏览器算对了，尤其是多层Flex嵌套进Grid时，尺寸控制权其实在最外层Grid项手上，不是Flex容器自己能决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
