←→ 切换·Esc 返回

弹性布局Flex

样式与布局基础
把一组元素横向或纵向排开，并控制间距和对齐
先知道
间距 Space

Flex 适合导航、按钮组和左右布局等一维排列，可以控制主方向上的分布和另一方向上的对齐。需要同时规划多行与多列时，网格布局 Grid通常更直接。

什么时候用

  • 导航横排：菜单项、工具栏、按钮组排一行
    首页组件术语
  • 竖向堆叠：表单 Form 字段、列表项用 column
    姓名邮箱字段竖着叠：flex-direction: column
  • 水平垂直居中：两个方向都 center，稳稳居中
    登录两个方向都 center，稳稳居中
  • 两端对齐：标题靠左、操作靠右用 space-between
    项目动态查看全部

什么时候不用

  • 还在用 float + clearfix 排列：那是上个时代的写法
    左浮动右浮动还要 clearfix 收尾，上个时代的写法
  • 多行多列对齐的卡片墙 → 用 网格布局 Grid 更合适
    多行多列对齐，是 grid 的主场
  • 子元素宽度全写死还不换行，直接溢出容器
    宽度全写死还不换行，挤出容器
  • 忘了 flex-wrap: wrap，内容一多挤变形
    标签一标签二标签三标签四标签五标签六
组成结构 · Anatomy
项目主轴 →交叉轴 ↓
1弹性容器Container写上 display: flex 的那个父元素
2弹性项目Item容器里的直接子元素
3主轴Main Axis项目的排列方向，justify-content 管它
4交叉轴Cross Axis和主轴垂直，align-items 管它
常见变体 · Variants
横排Row
导航、工具栏、按钮组排一行
竖排Column
表单字段、列表项垂直堆叠
居中Center
登录框、空状态放容器正中
两端对齐SpaceBetween
标题靠左、操作靠右时
典型使用场景
导航栏横排
display: flex，一排横着站
Vibe 图鉴 组件 术语 场景
logo、链接、头像都交给 flex 横排对齐
表单字段竖排
flex-direction: column
标题与操作分居两端
justify-content: space-between
项目动态
小狐狸 更新了「首页改版」 10:24
内容垂直居中
align-items + justify-content: center
暂无消息，稳稳居中