移动端布局：CSS3弹性盒子布局

分割页面区域的大盒子宽度一定要给百分比，这样才能不丢失精度。

5、移动端布局场景：三等分自适应容器
《三等分父容器，且固定间隙》
解决方案1：
Ul>li*3>div
将padding总值/3，第1个LI padding-right: 1/3；第2个LI 左右padding之和=1/3；第3个LI padding-left：1/3.
所有LI宽度33.3333%.

解决方案2：
使用CSS3中新增的弹性盒子布局。
父盒子添加：

1  //曾用名
2  display: -webkit-box;
3  display:box;
4  //现用名
5  display:-webkit-flex;
6  display:flex;

Ps：父容器添加该属性，意味着允许子元素分割它的剩余宽度，剩余宽度计算时，会预先减去子元素的margin padding border，然后才进行分割。

子盒子添加：
7  //曾用名
8  -webkit-box-flex: number;
9  box-flex:number;
10  //现用名
11  -webkit-Flex:number;
12  flex:number;

Ps：number是代表这个盒子平分的份数，父元素的剩余宽度会被平分成总number份。
如:ul>li*3 第1个LI flex:2; 第2 3个 LI flex:1;
则ul宽度被分成4份，第1个LI占2份，后面两个各占1份。
<br />