flex 布局 (display: flex|inline-flex)

---------------------下面是容器的属性--------------------------

flex-direction, 主轴方向

flex-direction: row; 默认值, 水平方向为主轴方向, 自左向右

flex-direction: row-reverse; 水平方向为主轴方向, 自左向右

flex-direction: column; 垂直方向为主轴方向, 自上而下

flex-direction: column-reverse; 垂直方向为主轴方向, 自下而上

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

justify-content: flex-start; 默认, 从行首起始位置开始排列

justify-content: flex-end; 从行尾起始位置开始排列

justify-content: center; 居中排列

justify-content: space-between; 平铺, 项目间间隔相等, 两端顶边

justify-content: space-around; 平铺, 项目两侧间隔相等(项目间有双倍间隔)

justify-content: space-evenly; 平铺, 项目两侧间隔相等, 两端间隔也和项目间的间隔相等

flex-wrap, 一条轴线排不下的时候如何换行

flex-wrap: nowrap; 默认值, 不换行

flex-wrap: wrap; 换行, 第一行在上方, 自上而下

flex-wrap: wrap-reverse; 换行, 第一行在下方, 自下而上

align-items, 元素在交叉轴方向的对齐方式

align-items: stretch; 默认值, 占满整个交叉轴(未设置高度或auto)

align-items: flex-start; 与交叉轴起点对齐

align-items: flex-end; 与交叉轴终点对齐

align-items: center; 交叉轴方向居中对齐

align-items: baseline; 与项目第一行的文字的基线对齐

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线, 该属性不起作用

align-content: stretch; 默认值。元素被拉伸以适应容器

align-content: flex-start; 元素位于容器的开头

align-content: flex-end; 元素位于容器的结尾

align-content: center; 元素位于容器的中心。

align-content: space-between; 元素位于各行之间留有空白的容器内。

align-content: space-around; 元素位于各行之前、之间、之后都留有空白的容器内。

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式

flex-flow: row nowrap; 默认值 横轴为主轴，超出不换行

flex-flow: row wrap; 横轴为主轴，超出换行

---------------------下面是 item 属性--------------------------

item: order 项目排序

item: flex-grow

增大的范围计算方式为: 剩余空间值 * (项目shrink / shrink总数)

item: flex-shrink; 指定 flex 的收缩规则, 默认值为1, 只在项目宽度之和大于容器宽度的时候生效,

缩小的范围计算方式为： 溢出值 * (项目shrink / shrink总数)

item: flex-basis; 设置弹性盒子伸缩基准值

item: align-slef; 允许单个项目的不同对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex: 1 缩写属性

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

参考链接