属性

  • flex-direction 决定主轴的方向

    • row 主轴为水平方向，起点在左端
    • row-reverse 主轴为水平方向，起点在右端
    • column 主轴为垂直方向，起点在上沿
    • column-reverse 主轴为垂直方向，起点在下沿

  • flex-warp

    • nowarp 默认 不换行
    • warp 换行 第一行在上方
    • wrap-reverse 换行 第一行在下方

  • justify-content

    • flex-start 默认 左对齐
    • flex-end 右对齐
    • center 居中
    • space-between 两端对齐，项目之间的间隔都相等
    • space-around 每个项目两侧的间隔相等

  • align-items

    • flex-start 交叉轴的起点对齐
    • flex-end 交叉轴的终点对齐
    • center 交叉轴的中点对齐
    • baseline 项目的第一行文字的基线对齐

  • order

    • order:1|2|```` 一个整数 定义项目的排序顺序，数值越小排序越靠前，默认为0

  • flex-grow

    • flex-grow:1|2|3````定义项目的方法比例，默认是0，即使存在剩余空间也不放大

  • flex-shrink

    • flex-shrink:1|2|3 ````定义了项目的缩小比例，默认为1，空间不足该项目将缩小

  • flex-basis

    • 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  • flex

    • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。