跳到主要内容

flex 弹性布局

弹性盒子是一种用于按行或按列布局的一维布局方法,元素可以膨胀以填充额外的空间,收缩以适应更小的空间

主轴与交叉轴

默认横的主轴,竖的交叉轴

css

flex 容器

flex 容器:flex-direction | flex-warp | flex-flow | justify-content | align-items | align-content

flex-direction(改变轴方向)

  • row 默认,横为主轴
  • row-reverse 横主轴反向
  • column 设置列为主轴
  • column-reverse 列主轴反向
源码预览打开窗口
查看源码

flex-warp(换行)与 flex-flow(缩写)

flex-warp

  • nowrap 默认,无换行
  • warp 换行
  • wrap-reverse 反向换行

flex-flow:[flex-direction][flex-warp]

源码预览打开窗口
查看源码

just-content(主轴对齐)

  • flex-start 默认,开头对齐
  • flex-end 结尾对齐
  • center 中间对齐
  • space-around 闲散对齐,开头空隙和结尾空隙 = 中间空隙 / 2
  • space-between 两端对齐,开头和结尾无空隙,中间空隙相等
  • space-evenly 平均对齐,开头空隙,结尾空隙和中间空隙都相等
源码预览打开窗口
查看源码

align-content(交叉轴对齐)

当不换行的情况下, align-content 不生效,所以必须配合 flex-wrap: wrap; 使用

  • stretch 默认,拉伸:当子元素不设置高度时拉伸为父容器的高度
  • flex-start 开头对齐
  • flex-end 结尾对齐
  • center 中间对齐
  • space-around 闲散对齐,开头空隙和结尾空隙 = 中间空隙 / 2
  • space-between 两端对齐,开头和结尾无空隙,中间空隙相等
  • space-evenly 平均对齐,开头空隙,结尾空隙和中间空隙都相等
源码预览打开窗口
查看源码

align-items(行对齐)

  • stretch 默认,拉伸
  • flex-start 顶部对齐
  • flex-end 底部对齐
  • center 中间对齐
  • baseline 底线对齐
源码预览打开窗口
查看源码

下面是一些布局案例

内联与块级元素居中布局

内联元素居中

  • 单行居中:line-height 等于父容器 height
  • 多行居中:display: flex;
  • 多行居中:display: table-cell;
源码预览打开窗口
查看源码

块级元素居中

  • 使用 flex 居中
  • 使用 position 绝对定位居中
源码预览打开窗口
查看源码

不定项居中布局

  • 使用 flex 居中
  • 使用 position 绝对定位居中
源码预览打开窗口
查看源码

均分列布局

  • 使用 flex 均分列
  • 使用 float + position 布局(例子中没自适应)
源码预览打开窗口
查看源码

子项分组布局

  • 使用 flex + 分组
  • 使用 flex + margin-right:auto 自适应
源码预览打开窗口
查看源码

flex 子项

flex 子项:order | flex-grow | flex-shrink | flex-basis | flex | align-self

flex-grow(扩展比例)

  • 0 默认值,表示不占用剩余的空白间隙扩展自己的宽度
  • 大于等于 1 时,占满所剩空间
  • 小于 1 时,就按比例占所剩空间,比如: 0.5 占一半
  • 子元素都是设置了 flex-grow,就各子元素按比例

具体看例子里的计算

源码预览打开窗口
查看源码

flex-shrink(收缩比例)

  • 1 默认值,表示 flex 容器空间不足时,元素的收缩比例
  • 为 0 时,不收缩,多出空间会溢出
  • 大于等于 1 时,自动收缩,跟容器大小相同
  • 小于 1 时,多出空间按比例收缩,比如: 0.5 多出空间收缩一半
  • 子元素都是设置了 flex-shrink,就各子元素按比例

具体看例子里的计算

源码预览打开窗口
查看源码

flex-basis(主轴大小)与 flex(缩写)

flex-basis

  • auto 默认值,指定了 flex 元素在主轴方向上的初始大小
  • 固定大小值:100px 50%
  • 0 没有宽度,自适应高度

flex: [flex-grow][flex-shrink][flex-basis]

源码预览打开窗口
查看源码

order 及 align-self

order

  • 0 默认值,改变某一个 flex 子项的排序位置
  • 数值越小,越排前面

align-self

  • auto 默认值,控制单独某一个 flex 子项的垂直对齐方式
  • 其他值跟 align-items 一样
源码预览打开窗口
查看源码

下面是一些布局案例

等高布局

  • 使用 flex 实现
  • 使用 float + margin-bottom + padding-bottom 技巧
源码预览打开窗口
查看源码

两列与三列布局

  • 使用 flex 实现
  • 使用 float + overflow 技巧
源码预览打开窗口
查看源码

Sticky Footer布局

中间内容区域不管多高,footer 区域都粘在底部

源码预览打开窗口
查看源码

溢出项布局

  • 使用 flex 布局
  • 使用 float 需要计算宽度
源码预览打开窗口
查看源码

综合案例

利用 flex 布局完成复杂布局

模拟 Swiper 轮播图

只实现布局,没实现效果

源码预览打开窗口
查看源码

模拟知乎导航

只实现布局,没实现效果

源码预览打开窗口
查看源码