跳到主要内容

flex 弹性布局

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

主轴与交叉轴​

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

css

flex 容器​

flex 容器：flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content

flex-direction（改变轴方向）​

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

flex-wrap（换行）与 flex-flow（缩写）​

flex-wrap

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

flex-flow：[flex-direction][flex-wrap]

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

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 轮播图​

只实现布局，没实现效果

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

模拟知乎导航​

只实现布局，没实现效果

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

最后由 lzw 于 更新