flexbox属性总结

看了阮一峰老师的博客，自己总结一下，原文地址

flexbox

        任何一个容器都可以指定为flex布局；
        flex容器（父级），flex项目（子级）；
        容器存在两根轴：
            水平方向主轴（main axis）；
            垂直方向交叉轴（cross axis）；
        主轴的开始位置（与交叉轴的交叉点）main start；
        主轴的结束位置 main end；
        交叉轴的开始位置 cross start；
        交叉轴的结束位置 cross end；
        项目默认沿着主轴方向排列；
        单个项目占据主轴的空间：main size;
        占据交叉轴的空间：cross size；

容器的属性：

        flex-direction
        flex-wrap；
        flex-flow
        justify-content
        align-items
        align-content

flex-direction：决定项目的排列；

        row | row-reverse | column | column-reverse
        row 默认，主轴为水平方向，起始点在左侧；
        row-reverse 主轴水平方向，起始点在右侧；
        column 主轴在垂直方向。起始点在上方；
        column-reverse 起始点在下方；

flex-wrap ：项目是否自动换行；

        nowrap | wrap | wrap-reverse
        nowrap 默认不换行
        wrap     换行，正常排列
        wrap-reverse 换行，反向排列，第一行在下方；

flex-flow 简写形式

        flex-flow: flex-direction flex-wrap；排列方式，是否换行；

justify-content 定义项目在主轴上的对齐方式

        flex-start | flex-end | center | space-between | space-around 
        左对齐     |  右对齐   |  中间对齐 | 两端对齐，项目间，间隔相等 | 项目间隔相等，项目与边框的距离是项目间距离的一半；

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

        —— |—— | —— |baseline |stretch
        前三个与上方一样 | 基于基准线对齐 | 如果项目没有设置高度或者设置了auto，那么项目将占满整个容器

/***********************************项目属性*********************************************************/

order

    定义项目的排列顺序 默认为0；数值越小越靠前；

flex-grow

     定义项目是否放大比例  默认为0；
                数值为 1，项目等比放大  ；
                数值为0，项目不放大，
                数值为2，项目占容器2/3;  
                值必须为正数；

flex-shrink

     定义项目缩小比例 默认为1，数值为0则不缩小；

flex-basis

    项目占据主轴的空间大小，默认为auto，即项目本身的大小；

flex

    简写形式    auto（1,1，auto）和none(0,0,auto),值可按需求定义。
                flex-grow    flex-shrink     flex-basis         

align-self

      属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。