移动端flex布局最近挺火的，空闲时间也看了些资料！好记性不如赖笔头，做下笔记吧。闲话少说 先上代码。
<div id="container">
<div id="header">头部</div>
<div id="center">
<div id="dyleft">左栏div</div>
<div id="dycenter">dycenter</div>
<div id="dyright">右栏divx</div>
</div>
<div id="footer">底部</div>
</div>
css 代码：
html, body { //css 初始化
margin: 0 0;
padding: 0 0;
}
#container {
width: 100%;
display: flex;
flex-flow: column nowrap; //设置主轴方向 以及设置当一行排不完的时候，不换行
min-height: 100vh;//css3中的长度单位， 相对于视口的高度。视口被均分为100单位的vh
}
#header, #footer {
flex: 0.1;
max-height: 50px;
background-color: red;
}
#center {
flex: 1;
display: flex;
flex-flow: row nowrap;
}
#dyleft, #dyright {
flex: 0 0 12em;
background-color: pink;
}
#dycenter {
flex: 1;
background-color: yellow;
}
flex属性解释：
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex-grow 官方解释：设置或检索弹性盒的扩展比率。
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
- 示例：b,c将按照1:3的比率分配剩余空间
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li:nth-child(1){width:200px;}
.flex li:nth-child(2){flex-grow:1;width:50px;}
.flex li:nth-child(3){flex-grow:3;width:50px;}
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，
即1:3
flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：
a: 200px
b: 50+(300/4*1)=125px
a: 50+(300/4*3)=275px
flex-shrink：用数值来定义收缩比率。不允许负值。
设置或检索弹性盒的收缩比率。
- 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
- 示例：a,b,c将按照1:1:3的比率来收缩空间
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(3){flex-shrink:3;}
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加
之后计算比率来进行空间收缩。
本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共
将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。
那么这么超出的200px需要被a,b,c消化
通过收缩因子， 200 /5 = 40;
最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px
flex-basis：length|percent | auto | content
用长度值来定义宽度。不允许负值
用百分比来定义宽度。不允许负值
auto：
无特定宽度值，取决于其它属性值
content：
基于内容自动计算宽度
设置或检索弹性盒伸缩基准值。
- 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间 （没明白什么意思？？？？ 直接上代码吧）
<style>
.box{
display:-webkit-flex;
display:flex;
width:600px;
margin:0;
padding:10px;
list-style:none;
background-color:#eee;}
.box li{
width:100px;
height:100px;
border:1px solid #aaa;
text-align:center;}
#box li:nth-child(3){
-webkit-flex-basis:600px;
flex-basis:600px;
}
</style>
</head>
<body>
<h1>flex-basis示例：</h1>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
代码显示 box 总共宽 600px 每个li 设置宽100px .一共5个。那么就是500px.但是li 也就是c 宽设置了600px. 我去 这一共宽600 + 400 =1000px 大于600px.不行啊肯定！
那怎么办？那就把别的li压缩啊。一共1000.那么100/1000 = 0.1（abde占比)
600/1000 = 0.6（c的占比）
1000-600 = 400px 那么这400px *0.1 = 40；400*0.6 = 240;
so a、b、d、e 宽度：100-40=60；
c:600- 60*4 = 360；
ok？？？应该没毛病吧
？？？google浏览器上为毛显示的宽是61？？狐火上显示60.8？？我tmd算的是60？难道是误差？
有知道的请留下言 谢谢！！
备注：
后期把flex 整个的知识点整理下 以供后期复习。欢迎关注。
