一：关于flex布局

    flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

二：容器属性

控制项目排列方向与顺序

flex-direction ：row(默认) | row-reverse | column | column-reverse

               row             即横向排列，项目排列顺序为正序1-2-3；

               row-reverse     同为横向排列，但项目顺序为倒序3-2-1。

               column          为纵向排列，项目顺序为正序1-2-3，

               column-reverse  同为纵向排列，项目顺序为倒序3-2-1。

控制项目是否换行 

flex-wrap ：nowrap(默认) | wrap | wrap-reverse

           nowrap 表示不换行；项目会强行等分容器宽度从而不换行

           wrap   表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

           wrap-reverse  同样表示换行，需要注意的是第一排会紧贴容器底部，效果与wrap相反。

  flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

控制项目在横轴的对齐方式

justify-content ：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

                默认flex-start 即左对齐，

                center        为居中，

                flex-end      为右对齐。

                space-between  为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

                space-around   为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

                space-evenly   为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

控制项目在纵轴排列方式

align-items：flex-start|flex-end|center|baseline|stretch(默认)

stretch如果项目没设置高度，或高度为auto，则占满整个容器，

flex-start会让项目在纵轴紧贴容器顶部

center在纵轴中心位置排列

baseline它让项目以第一行文字的基线为参照进行排列

# 注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

控制多行项目的对齐方式

align-content ：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

               stretch      即在项目没设置高度，或高度为auto情况下让项目填满整个容器，

               space-around  即项目之间间距为上下两端项目与容器间距两倍。

               space-evenly  项目之间间距与项目到容器之间间距相等

               flex-start ，center，flex-end  与  align-items属性表现一致：

三：项目属性

容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。

1.order   默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2.flex-grow  默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

            1.假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

            2.假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

            3.假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

3.flex-shrink  默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

4.flex-basis 用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

5.flex  默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

       （该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。）

6.align-self ： auto(默认) | flex-start | flex-end | center | baseline | stretch，

               用于让个别项目拥有与其它项目不同的对齐方式

               表示继承父容器的align-items属性。如果没父元素，则默认stretch。 各值的表现与父容器的align-items属性完全一致。