Flex布局（引用阮一峰大神）

Flex 布局教程：语法篇

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局教程：实例篇

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

一个学习Flex布局的小游戏

http://flexboxfroggy.com/#zh-cn

 

定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

• flex-basis 属性用于设置或检索弹性盒伸缩基准值。
• flex-grow 属性用于设置或检索弹性盒的扩展比率。
• flex-shrink 属性用于设置或检索弹性盒的收缩比率。

比如：

#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

那么第二个div的宽度是其他的div的3倍，总共有1+1+1+1+3 = 7,那么第二个占150，其他几个各占50；

再比如：

<ul class="flex">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

.flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}

---

本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么子元素将会溢出900-800=100px；

由于同时设置了收缩因子，所以加权综合可得300*1+200*2+400*3=1900px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即约等于16px
b被移除溢出量：(200*2/1900)*100，即约等于21px
c被移除溢出量：(400*3/1900)*100，即约等于63px
最后a,b,c的实际宽度分别为：300-16=284px, 200-21=179px, 400-63=337px