min-width 设定元素最小宽度下限，防止压缩变形，单位支持 px/rem/%；需在有压缩倾向的布局（如 flex、响应式网格）中生效，并常与 white-space、flex-shrink 等配合使用。
用 min-width 可以防止元素在容器缩小时被过度压缩，保持内容可读性和布局稳定性。它不是“固定宽度”，而是一个下限值——元素可以比它宽，但不能更窄。
基础写法与生效条件
直接设置 min-width 即可，单位支持 px、rem、% 等：
-
min-width: 300px;—— 最窄不小于 300 像素 -
min-width: 20rem;—— 基于根字体大小的弹性最小宽度 -
min-width: 50%;—— 相对于父容器宽度的最小比例（需注意父容器有明确宽度才可靠）
注意：min-width 只在元素有压缩倾向时起作用，比如父容器设了 display: flex 且子项未设固定宽、或处于响应式网格中被挤压时。
常配合使用的场景
单独写 min-width 往往不够，需结合其他属性才能真正防变形：
立即学习“前端免费学习笔记（深入）”；
- 表格列：给
<th>或<td>加min-width: 120px;+white-space: nowrap;，避免文字换行压扁列宽 - Flex 项目：父容器
display: flex;下，子项默认会收缩，加min-width: 0;是重置默认行为，再设具体值（如min-width: 240px;）才有效 - 响应式卡片：卡片内图片+文字组合时，给整个卡片加
min-width: 280px;，防止小屏下内容挤成一团
避免常见误区
有些写法看似合理，实际无效或适得其反：
- ❌ 不要只写
min-width: 100%;却没给父容器设宽度——百分比无参照，会被忽略 - ❌ 避免和
width: 100%;同时使用且值冲突（如width: 100%; min-width: 500px;在窄屏下会导致横向滚动） - ✅ 推荐搭配
max-width使用，形成宽度区间：min-width: 320px; max-width: 600px; width: 100%;
替代方案对比（何时选别的）
min-width 解决的是“不能太窄”，但若目标是“尽量不缩”或“内容自适应”，可考虑：
-
flex-shrink: 0;—— Flex 子项完全不收缩（适合图标、按钮等固定尺寸组件） -
white-space: nowrap;+overflow: hidden;+text-overflow: ellipsis;—— 防止文字折行变形，用省略号截断 -
fit-content或min-content作为 width 值 —— 让宽度贴合内容本身（兼容性略低，需看浏览器支持）
不复杂但容易忽略。关键是在压缩发生的上下文中，给对的元素加上合适的 min-width，并检查是否被其他样式覆盖或抵消。
