弹性盒子

一、（了解）Flexbox布局功能主要具有以下几点：

1：屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
2：可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
3：可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4：可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5：可以控制元素在页面上的布局方向；
6：可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

二、创建Flex容器：

第一步需要将父盒子设置为  display:flex;   flex容器
注意: 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

三、基本概念：

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的纵轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

四、容器属性：

以下6个属性设置在容器上。
1、flex-direction      设置项目的排列方向
2、flex-wrap           设置如何换行
3、flex-flow           是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4、justify-content     定义项目在主轴上的对齐方式
5、align-items         定义项目在纵轴上如何对齐 
6、align-content       定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
1-1、flex-direction      设置项目的排列方向
        row (默认)      水平方向起点在左边
        row-reverse    水平方向起点在右边
        column         竖直方向 起点在上方
        column-reverse 竖直方向 起点在下方
2-1、flex-wrap           设置如何换行
        nowrap（默认）   不换行
        wrap            换行
        wrap-reverse    换行，第一行在下方
3-1、flex-flow           是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4-1、justify-content     定义项目在主轴上的对齐方式
        flex-start（默认值）     左对齐
        flex-end               右对齐   
        center                 居中对齐 
        space-between          两端对齐 项目之间的间隔相等 
        space-around           每个项目两侧的间隔相等
5-1、align-items         定义项目在纵轴上如何对齐
        stretch（默认值）         如果项目未设置高度或设为auto，将占满整个容器的高度。
        flex-start              纵轴的起点对齐。
        flex-end                纵轴的终点对齐。
        center                  纵轴的中点对齐。
        baseline                项目的第一行文字的基线对齐。
6-1、align-content       定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
        flex-start          与纵轴的起点对齐。
        flex-end            与纵轴的终点对齐。
        center              与纵轴的中点对齐。
        space-between       与纵轴两端对齐，轴线之间的间隔平均分布。
        space-around        每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
        stretch（默认值）     轴线占满整个交叉轴。

五、项目属性

以下6个属性设置在项目上。
1、order                定义项目的排列顺序。数值越小，排列越靠前，默认为0
2、flex-grow            定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
3、flex-shrink          定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4、flex-basis          用来设置flex items 在 main axis方向上的base size 默认为auto，可以设置具体的宽度数值 
5、flex                flex 是flex-grow || flex-shink||flex-basis的简写         
6、align-self        可以通过align-self 覆盖flex container 设置的align-items
1-1、order          定义项目的排列顺序。数值越小，排列越靠前，默认为0
2-1、flex-grow    定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
        如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
        如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3-1、flex-shrink    定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
        如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，
        其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

小试牛刀总结了一番，flex的属性及用法