弹性盒子布局

小程序的盒子模型采用的是CSS3规范所提出的弹性盒布局模型。弹性盒（ Flexible Box 或 flexbox）， 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。布局方式相比传统盒模型而言，可以快速实现诸如垂直居中、弹性宽度和高度等场景，以及更多排版需求，诸如：竖排元素或元素左侧对齐等。

弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器内包含了一个或多个弹性子元素。

容器属性

弹性容器支持的属性有：

属性	含义
display	通过设置display属性，指定元素是否为Flex布局
flex-direction	指定主轴方向，决定了项目的排列方式
flex-wrap	排列换行设置
flex-flow	flex-direction和flex-wrap的简写形式
justify-content	定义项目在主轴的对齐方式
align-items	定义项目在交叉轴上的对齐方式
align-content	定义多根轴线的对齐方式，如果只有一根轴线，该属性不起作用

1、display语法：
.mybox{display:flex | inline-flex ;
flex: 用于生产块级Flex布局。
inline-flex: 用于生产行内Flex布局，行内容器符合行内元素特征，同时在容器内符合Flex布局规范。
设置Flex布局之后，子元素float、clear和vertical-align属性将会失效。
2、flex-direction语法：
.mybox{flex-direction：row | row-reverse | colum |colum-reverse ;
row:主轴为水平方向，起点在左端，默认值。
row-reverse：主轴为水平方向起点在右端。
colum：主轴为垂直方向，起点在上沿。
colum-reverse：主轴为垂直方向，起点在下沿。
3、flex-wrap语法：
.mybox{ flex-wrap: nowrap| wrap |wrap-reverse ;
wrap:换行，第一行在上方。
nowrap:不换行，默认值。
wrap-reverse：换行，第一行在下方。
当设置换行时，还需要设置align-items属性配合实现自动换行，并且align的值不能为“stretch”
4、flex-flow语法：
.mybox{flex-flow: <flex-direction>||<flex-wrap>;}
示例代码:
.mybox{flex-flow: row wrap;}

flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap。

5、justify-content语法：
.mybox{justify-content:flex-start | flex-end | center | space-between | space-around ;}
justify-content与主轴方向有关，包括以下属性（默认主轴从左到右）
flex-start：左对齐，默认值。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间间隔相等。
space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。
6、align-items语法：
.mybox{align-items:flex-start | flex-end | center | baseline |stretch ;}
flex-start：交叉轴起点对齐；
flex-end：交叉轴终点对齐；
center：交叉轴中线对齐；
baseline：项目根据他们第一行文字的基线对齐。
stretch：如果项目未设置高度或设置为auto，项目将在交叉轴方位拉伸填充整个容器，默认值。

7、align-content语法：
.mybox{align-content:flex-start | flex-end | center | space-between | space-around | stretch ;}
flex-start：与交叉轴起点对齐。
flex-end：与交叉轴终点对齐。
center：与交叉轴中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边 框间隔大一倍。
stretch：轴线占满整个交叉轴，每个项目都会被拉伸直至填满交叉轴，默认值。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

项目属性

项目支持 的属性有六个：

属性	定义
order	定义项目的排列顺序，默认为0
flex-grow	定义项目的放大比例，默认为0
flex-shrink	定义项目的缩小比例，默认为1
flex-basis	定义在分配多余空间之前，项目占据的主轴空间（main size）默认为auto
flex	flex-grow、flex-shrink、flex-basis的简写，默认为0 1 auto
align-self	用来设置单独伸缩项目在交叉轴的对齐方式，可覆盖默认的align-items属性

1、order
数值越小，排列越靠前，默认为0。
.myitem{orderr:<integer>；}
2、flex-grow
默认为0 ，即存如果在剩余空间，也不放大。
.myitem{ flex-grow :<number>;}
3、flex-shrink
默认为1，如果空间不足，该项目将缩小。
.myitem{flex-shrink:<number>;}
4、flex-basis
用来定义伸缩项目的基准值，剩余空间将按比例进行缩放。它的默认值为auto，即项目本来的大小。
.myitem{flex-basis:<length>;}
5、flex（建议优先使用这个属性，而不是单独写三个分离属性，因为浏览器会推算相关值）
默认值为 0 1 auto。后两个属性可选。
该属性有两个快捷值auto（1 1 auto）和none（0 0 auto）。
语法： .myitem{flex: none | [<'flex-grow'><'flex-shrink'>?|| <'flex-basis'>]}
示例代码：
.myitem{flex: 1 1 auto}相当于.myitem{flex：auto；}
6、align-self
该属性会复写默认的对齐方式。其值除了auto，其余与容器align-items属性完全一致。
.myitem(align-self:auto | flex-start | flex-end | center | baseline | stretch ;}
auto：表示继承容器align-items属性，如果没有父元素，则等同于stretch，默认值。
flex-start：交叉轴起点对齐。
flex-end：交叉轴终点对齐。
center：交叉轴中线对齐。
baseline：项目根据第一行文字基线对齐。
stretch：如果项目未设置高度或设置为auto，则项目将在交叉轴方向拉伸填充整个容器，默认值。