min-width 设定元素宽度下限，防止过度压缩，保障可读性与布局稳定；支持多种单位，适用于卡片、表单、Flex/Grid 子项等场景，与 width、max-width 共存时按交集生效。
用 min-width 可以防止元素在容器变窄时被过度压缩，确保内容可读、布局稳定。
min-width 的基本用法
给元素设置 min-width 后，即使父容器或视口缩小，该元素宽度也不会小于设定值。它只起“下限”作用，不影响元素在空间充足时的自然伸展。
- 支持像素（px）、百分比（%）、em、rem、vw 等单位
- 对块级元素、弹性子项、网格子项都有效
- 注意：它不会强制元素变宽，只是“不许更窄”
常见适用场景
以下情况加 min-width 很实用：
-
响应式卡片/按钮：比如卡片内容含图标+文字，设
min-width: 200px避免文字挤成一行或图标错位 -
表单输入框：防止在小屏上缩得太窄，影响输入体验，如
input { min-width: 120px; } -
Flex 或 Grid 布局中的子项：配合
flex: 1或grid-template-columns使用，避免某列塌陷
和 width、max-width 的区别
width 是固定宽度（除非用百分比），max-width 是上限，而 min-width 是下限——三者可共存，浏览器按需取交集。
立即学习“前端免费学习笔记（深入）”；
- 例如：
width: 100%; min-width: 320px; max-width: 768px;表示“尽量占满父容器，但最少 320px，最多 768px” - 当父容器宽 500px 时，该元素显示为 500px；父容器宽 280px 时，因低于 min-width，实际取 320px
注意兼容性和细节
min-width 在所有现代浏览器中完全支持，包括 IE9+。需留意的是：
- 对
white-space: nowrap的内联元素，min-width 可能被长单词或 URL 强制突破（此时可搭配overflow-wrap: break-word） - 表格单元格（
）默认忽略 min-width，需先设 table-layout: fixed才生效- 不要滥用：过度设置过大的 min-width 会导致横向滚动或布局断裂，应结合设计断点合理设定
