CSS flex弹性布局属性

容器属性

• flex-direction 设置主轴方向,默认水平方向

  • row 默认值，主轴为水平方向（从左向右排水平布局）

  • row-reverse 主轴为水平方向（从右向左排水平布局）

  • column 主轴为垂直方向（从上到下垂直布局）

  • column-reverse 主轴为垂直方向（从下到上垂直布局）

• flex-wrap 主轴方向换行

  • nowrap 默认值,不换行

  • wrap 换行,第一行在上面

  • wrap-reverse: 换行，第一行在下方

• flex-flow flex-direction+flex-wrap 默认值为 row nowrap,水平布局不换行

• justify-content 主轴上的对齐方式

  • flex-start 默认值，左对齐

  • flex-end 右对齐

  • center 居中

  • space-between 两端对齐，项目之间的间隔都相等

  • space-around 每个项目两侧的间隔相等

• align-items 交叉轴上的对齐方式

  • flex-start 上对齐

  • flex-end 下对齐

  • center 居中

  • baseline 第一行文字的基线对齐

  • stretch 默认值 占满整个容器的高度

• align-content 多根轴线时的对齐方式,一般与flex-wrap一起使用

  • flex-start 与交叉轴的起点对齐

  • flex-end 与交叉轴的终点对齐

  • center 与交叉轴的中点对齐

  • space-between 与交叉轴两端对齐，轴线之间的间隔平均分布

  • space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

  • stretch 默认值，轴线占满整个交叉轴

元素属性

• order 排序默认为0,由小到大排列

• flex-grow 放大比例，默认为 0,即如果存在剩余空间，也不放大。

• flex-shrink 缩小比例，默认为 1,即如果空间不足，该项目将缩小。

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

• align-self 可以单独设置元素在交叉轴方向的布局,默认继承父容器的align-items

  • flex-start 上对齐

  • flex-end 下对齐

  • center 居中

  • baseline 第一行文字的基线对齐

  • stretch 默认值 占满整个容器的高度