flex-弹性布局

display: flex;  开启弹性布局

flex-direction: 设置弹性元素的排列方式(主轴)

    row: 默认值, 水平排列(左向右)

    row-reverse

    column

    column-reverse

flex-wrap: 弹性元素是否在弹性容器中自动换行

    nowrap: 默认值, 元素不会自动换行

    wrap: 元素沿着辅轴方向自动换行

    wrap-reverse: 元素沿着辅轴反方向换行

flex-flow: row wrap; direction, wrap的简写属性

justify-content: 主轴空白空间的分布

    flex-start     沿着主轴起边排列

    flex-end       沿着主轴终边排列

    center         居中

    space-around   空白分布到元素两侧

    space-between  空白均匀分布到元素间

    space-evenly   空白分布到单侧

align-content: 辅轴空白空间的分布

align-items: 元素在辅轴上如何对齐

    stretch    默认值, 将元素的长度设置为相同的值

    flex-start 元素不会拉伸, 沿着辅轴起边对齐

    flex-end   元素不会拉伸, 沿着辅轴终边对齐

    center     居中对齐

    baseline   基线对齐

flex-grow:   弹性元素伸展系数

flex-shrink: 弹性元素收缩系数

flex-basis:  元素在主轴上的基础长度(主轴横向则为宽度, 主轴纵向则为高度)

    auto 默认值, 参考元素自身的宽度或高度

    传递具体数值则以此值为准

flex: 同时设置元素的 增长/缩减/基础长度

    initial: "flex: 0 1 auto"

    auto:    "flex: 1 1 auto"

    none:    "flex: 0 0 auto" 即元素没有弹性

order: 可以指定弹性元素的排列顺序