flex 布局

容器的属性 ：

    flex-direction: row-reverse   主轴水平向左

    column    主轴从上到下

    column-reverse 主轴从下到上

    flex-wrap: wrap    项目换行

    flex-wrap: wrap-reverse         项目换行反转

     flex-flow: row wrap flex-direction和flex-wrap的缩写


    项目沿主轴的对齐方式
justify-content: flex-start 项目沿主轴起始点对齐
center 中心对齐
flex-end 结束对齐
space-around 项目两侧留白相等
space-between 项目间距相等
    项目沿交叉轴的对齐方式
align-items:         flex-start 沿交叉轴的开始对齐
center 沿交叉轴的中间对齐
flex-end 沿交叉轴的结束对齐
baseline    基线对齐(文字底部对齐)
stretch(默认值) (如果项目没有指定高度)沾满整个交叉空间(垂直方向)

align-content:         flex-start 轴线沿交叉轴的开始对齐
center 轴线沿交叉轴的中间对齐
flex-end 轴线沿交叉轴的结束对齐
space-around 轴线两侧留白相等
space-between 轴线两侧间距相等
stretch 轴线空间被充满

项目的属性:

align-self:    这个属性接受和align-items一样的那些值。覆盖align-items的值
order: 0; 决定项目的位置 值越小越靠前 接受负值 默认值0
flex-grow: 0; 为0不放大 大于0为放大比率
flex-shrink: 1;
flex-basis: Pixcel|auto|100%  指定项目缩放的基准值，flex会在此基准上进行缩放大小的计算;
flex: 1 1 auto   //简写flex:1;
flex-grow,flex-shrink,flex-basis的缩写形式，代表自动放大，自动缩小 基准值为项目本身大小;