flex 弹性布局属性

最后更新：2026-09-13

flex flex 弹性布局属性

flex 是 CSS 弹性盒子模块中最核心的简写属性，用于设置一个弹性项目（flex item）如何伸缩以适应容器内的剩余空间。它由 flex-grow、flex-shrink 和 flex-basis 三个子属性组成，分别控制项目的放大比例、缩小比例和初始大小。通过 flex 属性，可以轻松实现等分布局、自适应宽度和流式排列等常见布局效果。

分类
初始值	0 1 auto
继承	否
适用于	flex-items
可动画	length
CSS 版本	CSS3
状态	标准

📝 语法

flex: none | auto | initial | <flex-grow> <flex-shrink>? <flex-basis>?;

⚙️ 取值

值	类型	描述
`none \| auto \| initial`	关键字	预定义弹性值
`<flex-grow> <flex-shrink>? <flex-basis>?`	值	弹性增长/收缩/基础值

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
flex	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： flex: 1; 是 flex: 1 1 0% 的简写，表示项目可放大可收缩，且基础尺寸为 0，常用于让项目均分剩余空间。

注意： flex: none; 等价于 flex: 0 0 auto，项目既不放大也不收缩，完全按内容或设定的宽高显示，适合用于固定尺寸的侧边栏或按钮。

❓ 常见问题

Qflex: 1 和 flex: auto 有什么区别？

Aflex: 1 是 flex: 1 1 0% 的简写，基础尺寸为 0，所有空间按比例重新分配，多个 flex: 1 能严格等宽；flex: auto 是 1 1 auto 的简写，子项先按内容或 width 定基础大小再分剩余空间，内容多的占更多。均分用 flex: 1，按内容比例用 flex: auto。

Q什么时候应该用 flex 简写而不是单独设置子属性？

A大多数情况推荐用 flex 简写，因为它一次设置 grow/shrink/basis 三个子属性，避免只写 flex-grow 时 flex-basis 退回默认值 0 的意外。需要单独覆盖某个子属性（如只在媒体查询里改 flex-basis）时才用独立属性。

Qflex: 1 时子项里的文字被压缩换行怎么办？

A这是子项默认 min-width: auto 导致的：空间不足时弹性项目的最小尺寸按内容计算，内容被压缩或溢出。解决：给子项设 min-width: 0（column 方向用 min-height: 0），配合 overflow: hidden 和 text-overflow: ellipsis 实现单行省略。