前端

弹性布局Flex

你可能会说

把这几个按钮排成一行，间距均匀，还能垂直居中。

沿一维主轴方向自动计算并分配子元素尺寸、对齐与间隙的弹性布局系统。导航链接横排、按钮组居中或图标与文字并排时，可在父元素上设置 display: flex。justify-content 控制主轴分布，align-items 控制交叉轴对齐；它适合一行或一列的关系，需要同时规划多行和多列时应先考虑网格布局 Grid。

也常被叫作弹性盒弹性布局FlexboxFlex布局

组成结构 · Anatomy

项目主轴 →交叉轴 ↓

写上 display: flex 的那个父元素

容器里的直接子元素

项目的排列方向，由 justify-content 控制分布与间距

垂直于主轴方向的副轴对齐，由 align-items 控制。

常见变体 · Variants

横排Row

默认主轴为水平方向；内容需要沿同一行流动时选择

竖排Column

主轴改为垂直方向；内容顺序应自上而下时选择

居中Center

在容器尺寸明确时，把两条轴上的剩余空间分配到内容两侧

两端对齐SpaceBetween

把主轴剩余空间放到项目之间；适合两端需要贴边的排列

典型使用场景

导航栏横排

开启弹性布局后子元素默认沿水平主轴排列

BuildHub 图鉴 组件术语场景

logo、链接、头像都交给 flex 横排对齐

表单字段竖排

flex-direction: column

昵称邮箱

标题与操作分居两端

justify-content: space-between

项目动态

小狐狸更新了「首页改版」 10:24

内容垂直居中

align-items + justify-content: center

暂无消息，内容在两条轴上居中