CSS布局踩坑记：flex和grid的那些坑

# CSS布局踩坑记：flex和grid的那些坑 ## 前言 做了三年前端，CSS布局踩过的坑数不清。今天把flex和grid最容易踩的坑总结一下，都是血泪教训。 ## Flex踩坑 ### 坑1：文字溢出不省略 ```css /* 有问题：文字超出不会省略 */ .item { display: flex; align-items: center; } .item .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 没用！因为flex子元素默认 min-width: auto */ } /* 解决：加上 min-width: 0 或 overflow: hidden */ .item .text { min-width: 0; /* 关键！ */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` ### 坑2：flex-shrink的默认行为 ```css /* flex-shrink默认是1，所以子元素会被压缩 */ .sidebar { width: 200px; /* 你以为宽度是200px */ /* 实际上当空间不够时会被压缩！ */ flex-shrink: 0; /* 加上这个才能固定宽度 */ } ``` ## Grid踩坑 ### 坑3：auto-fill vs auto-fit 区别 > 被这个坑了好久，布局一直不对。 ```css /* auto-fill：尽可能多地创建列，即使是空的 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* auto-fit：会把空列折叠，让现有元素填满空间 */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 元素少的时候区别明显： auto-fill: [item][item][空][空] auto-fit: [ item ][ item ] */ ``` ### 坑4：grid子元素图片变形 ```css .grid img { width: 100%; height: 100%; object-fit: cover; /* 保持比例裁剪 */ } ``` ## 响应式布局方案 ```css /* 推荐：grid + clamp 实现自适应 */ .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, 2vw, 2rem); padding: clamp(1rem, 3vw, 3rem); } ``` ## 总结 - flex子元素记得加 `min-width: 0` - 固定宽度用 `flex-shrink: 0` - `auto-fill` 和 `auto-fit` 搞清区别再用 - 响应式优先用 `grid` + `clamp()`