flex布局-所有属性整理

/* 
    flex布局：
    弹性盒布局，flex容器，子元素flex项目
    默认两根轴：水平轴和垂直交叉轴，项目默认沿主轴排列
    注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
*/

/* 
    一、容器的属性
        flex-direction
        flex-wrap
        flex-flow
        justify-content
        align-items
        align-content
*/

/* 
    1、flex-direction : 决定主轴方向（项目的排列方向）
        row : 默认值，主轴水平，起点左端
        row-reverse : 主轴水平，起点右端
        column : 主轴垂直，起点上端
        column-reverse : 主轴垂直，起点下端
*/

/* 
    2、flex-wrap : 各项目是否有换行
        nowrap : 默认值，不换行
        wrap : 换行
        wrap-reverse : 换行，第一行在下方
*/

/* 
    3、flex-flow : 是flex-direction 和 flex-wrap 的简写 默认值 row wrap
*/

/* 
    4、justify-content : 定义项目在主轴上的排布方式
        flex-start : 左对齐
        flex-end   : 右对齐
        center     : 居中
        space-betwoon : 两端对齐，项目之间间隔相等
        space-around  : 每个项目间隔相等，所以项目之间间隔比两端间隔大一倍
*/

/* 
    5、align-items : 定义项目在交叉轴上如何对齐
        flex-start : 上对齐
        flex-end   : 下对齐
        center     : 垂直居中
        baseline   : 项目的第一行文字基线对齐
        stretch    : 默认值，如果项目为设置高度或者auto，将沾满整个容器高度
*/

/* 
    6、align-content : 定义了多根轴线的对齐方式（约束交叉轴方向上）。如果只有一根轴线，不起作用
        flex-start：与交叉轴的起点对齐。
        flex-end：与交叉轴的终点对齐。
        center：与交叉轴的中点对齐。
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
        stretch（默认值）：轴线占满整个交叉轴。
*/


/* 
    二、项目上的属性
        order 
        flex-grow
        flex-shrink
        flex-basis
        flex
        align-self
*/

/* 
    1、order : 定义项目的排列顺序。数值越小，越靠前，默认值 0
*/

/* 
    2、flex-grow : 定义项目放大比例。默认0，即如果存在剩余空间，也不放大
        如果所有项目flex-grow:1,则平分剩余空间，按照占比分空间
*/

/* 
    3、flex-shrink : 定义项目缩小比例。默认1，即空间不足，项目默认缩小
        如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
        如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
        负值对该属性无效
*/

/* 
    4、flex-basis : 定义了在分配多余空间之前，项目占据的主轴空间。
        可以设为跟width或height属性一样的值固定px，项目占据固定空间
*/

/* 
    5、flex : 是flex-grow、flex-shrink、flex-basis 简写，默认：0 1 auto，后两个属性可选值
        该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
*/

/* 
    6、align-self : 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items，默认auto。
        flex-start : 上对齐
        flex-end   : 下对齐
        center     : 垂直居中
        baseline   : 项目的第一行文字基线对齐
        stretch    : 默认值，如果项目为设置高度或者auto，将沾满整个容器高度 
*/