考虑到flexbox布局的各种css属性五花八门,长时间不用又会忘掉大半,以此有了这篇速查手册。

入门属性

  • 主轴:Main-Axis、水平方向
  • 侧轴:Cross-Axis、垂直方向
  • flex容器:使用flexbox时,首先声明父容器为一个flex容器
  • flex项目:当父容器显示设置为flex项目,其子元素就变成了flex项目。如当无需列表ul显示声明display属性为flex容器,无序列表ul就为flex容器。

flex容器的一些属性

  • display: flex || inline-flex
  • flex-direction: row || column || row-reverse || column-reverse
  • flex-wrap: wrap || nowrap || wrap-reverse
  • flex-flow(是flex-direction和flex-wrap两个属性的速记写法)
  • justify-content: flex-start || flex-end || center || space-between || space-around
  • align-items: flex-start || flex-end || center || strech || baseline
  • align-content: 用于多行flex容器,排列效果和align-items值一样,除了baseline属性值

flex项目的一些属性

  • order:使得flex项目在一个flex容器中重新排序
  • flex-row:控制flex项目在容器有多余的空间如何放大,在没有额外的空间如何缩小
  • flex-shrink:同上
  • flex-basis:属性可以指定Flex项目的初始大小
  • flex:是flex-grow、flex-shrink和flex-basis三个属性的速记属性
  • align-self:auto || flex-start || flex-end || center || baseline || stretch

眼花缭乱有木有!

flex容器属性分析

  • display
    对于flexbox而言,有两种形式可以设定,flexinline-flex,其表现形式与blockinline-block差别不大。默认flex。
  • flex-direction
    该属性控制着flex项目沿着主轴方向的排列方向。默认row。
    row值:flex项目沿着Main-Axis排列,从左到右,水平排列
  • flex-wrap 和 flex-reverse
    flex-wrap控制flex容器的默认行为。flex容器会在一行内容纳所有flex项目,不换行排列,因为flex-wrap属性默认值nowrap
  • flex-flow
    flex-flow是flex-direction和flex-wrap的两个属性的速记写法,可以类比border

    1
    2
    3
    ul {
    flex-flow: row wrap; //前者为flex-direction, 后者为flex-wrap
    }
  • justify-content
    该属性主要定义了flex项目在主轴上(Main-Axis)的对齐方式,默认值是flex-start(让所有flex项目Main-Axis从开始边缘,左对齐开始)
    space-between属性让flex项目两者的间距相同。
    space-around属性让每个flex项目都具有相同的空间。

  • align-items
    该属性类似justify-content,主要控制flex项目在侧轴(Cross-Axis)的对齐方式
    其中,baseline让flex项目在主轴上沿着基线对齐

  • align-content
    该属性可类比align-items属性,控制多行flex项目在flex容器里的展现

flex项目属性分析

  • order
    order属性允许在一个flex项目中重新排序,默认属性值为0,可类比z-index属性。

  • flex-grow 和 flex-shrink
    这两个属性控制flex项目在容器的多余空间内的扩展,或者没有额外空间时如何缩小,接收大于或等于零的数。
    flex-grow默认值为0,即是不展开。
    flex-shrink默认值是1,即是父容器小于自身,会收缩。

  • flex-basis
    flex-basis可以指定flex项目的初始大小,即是flex-grow和flex-shrink属性调整大小适应flex容器前。
    flex-basis可取任何width属性的单位( %、em、rem、px),默认值auto,即是基于内容的多少自动计算。想固定宽度,则flex-basis: 100px

  • flex
    flex是flex-grow、flex-shrink、flex-basis的速记属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    li {
    flex: 0 1 auto; // 对应flex-grow、flex-shrink、flex-basis
    }

    // 相当于
    li {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    }

不设置flex-basis的值,则为绝对flex项目,flex-basis默认值为0(项目宽度不会随着内容多少而改变)
当设置了flex-basis,会得到相对flex项目(项目宽度会随着内容多少而改变)

flex: 0 0 auto 相当于 flex: none
宽度是被自动计算,不过弹性项目不会伸展或者收缩(因为二者都被设置为零)。

flex: 1 1 auto 相当于 flex: auto
弹性项目会填满可用空间,在缩放浏览器时也会随之收缩。

当有多个弹性项目,并且其初始宽度flex-basis被设置为基于零的任何值时,弹性项目的宽度被根据 flex-grow值的比例来计算。

  • align-self
    该属性可以改变一个弹性项目沿侧轴的位置

其中,auto值选项,是将flex项目的值设置为父元素的align-items的值