小程序之“flex”布局

flex布局 又称弹性布局。前端布局应用很广泛（这玩意感觉很强大） 一般布局用这个就可以了。本文参考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$阮一峰老师博客里的介绍

            任何一个容器都可以指定为 Flex 布局（行元素也可以 display：inline-flex）。flex容器下子元素的float、clear和vertical-align属性将失效。

使用方法：.box{display:flex}      

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex容器的六个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

        1、flex-direction:决定元素的排列方向 默认是横排（即X轴）。它有四个属性：row（默认）、row-reverse、column、column-reverse。

row:横向排列从左到右依次排。

row-reverse: row的反向，即 （原本从初始元素排列反向从末尾依次排  这是横着的）。

column：改变主轴排列方向Y为主轴（就是元素都是竖着排列的）。

column-reverse: column的反向（原本从初始元素排列反向从末尾依次排 竖着排） 。

2、flex-wrap：有nowrap(默认不换行)、wrap、wrap-reverse

        flex-wrap:wrap(当一行排不下时自动换行)

        flex-wrap:wrap-reverse(第一行在下面)

3、justify-content:（定义主轴排列方式）使用方法.box {justify-content:flex-start | flex-end | center | space-between | space-around;}

4、align-items：（定义竖排的排列方式 如果你的主轴是数轴 则排列横列排序方式）.box {align-items:flex-start | flex-end | center | baseline | stretch;}

        这些足矣用于大多布局了。喜欢请点下关注呗谢谢大佬们。（如有不足请指出，三克油啊哈哈）