弹性布局Flex
你可能会说
把这几个按钮排成一行，间距均匀，还能垂直居中。
沿一维主轴方向自动计算并分配子元素尺寸、对齐与间隙的弹性布局系统。导航链接横排、按钮组居中或图标与文字并排时，可在父元素上设置 display: flex。justify-content 控制主轴分布，align-items 控制交叉轴对齐；它适合一行或一列的关系，需要同时规划多行和多列时应先考虑网格布局 Grid。
先知道
也常被叫作弹性盒弹性布局FlexboxFlex布局
你可以这样告诉 AI Agent
请用 Flex 整理工具栏：标题在左，操作组在右，整体垂直居中；按钮数量变化时仍保持两端关系。窄屏放不下时允许合理换行，不要用绝对定位或固定外边距硬推。
什么时候用
- 导航横排：菜单项、工具栏、按钮组排一行首页组件术语
- 竖向堆叠：表单 Form 字段、列表项用 column姓名邮箱flex-direction: column 改为垂直排列
- 水平垂直居中：登录区、空状态等单一内容可在明确尺寸的容器中居中登录主轴与交叉轴都设为 center
- 两端对齐：标题靠左、操作靠右用 space-between项目动态查看全部
什么时候不用
- 用 float + clearfix 构建常规一维排列：需要额外清除浮动，Flex 通常更清晰左浮动右浮动
- 多行多列对齐的卡片墙通常使用 网格布局 Grid需要同时控制行列关系时，Grid 通常更直接
- 子元素宽度全写死还不换行，直接溢出容器
- 未设置 flex-wrap: wrap：内容变多时会被压缩或溢出
组成结构 · Anatomy
项目主轴 →交叉轴 ↓
写上 display: flex 的那个父元素
容器里的直接子元素
项目的排列方向，由 justify-content 控制分布与间距
垂直于主轴方向的副轴对齐，由 align-items 控制。
常见变体 · Variants
横排Row
默认主轴为水平方向；内容需要沿同一行流动时选择
竖排Column
主轴改为垂直方向；内容顺序应自上而下时选择
居中Center
在容器尺寸明确时，把两条轴上的剩余空间分配到内容两侧
两端对齐SpaceBetween
把主轴剩余空间放到项目之间；适合两端需要贴边的排列
典型使用场景
导航栏横排
开启弹性布局后子元素默认沿水平主轴排列
Vibe 图鉴
组件
术语
场景
Vibe 图鉴
组件
术语
场景
logo、链接、头像都交给 flex 横排对齐
表单字段竖排
flex-direction: column
标题与操作分居两端
justify-content: space-between
小狐狸 更新了「首页改版」
10:24
项目动态
小狐狸 更新了「首页改版」
10:24
内容垂直居中
align-items + justify-content: center
暂无消息，内容在两条轴上居中
延伸阅读 · 权威出处
快速练习