CSS随手总结，flex

**1.flex:**让弹性盒模型拥有相同的长度，忽略其内容。
其实就是均分长度

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
	<div style="background-color:black;">带有更多内容的绿色 div</div>
</div>
#main div
{
	flex:1;
}

四个div均分父div长度
flex-grow/shrink :让指定元素收缩或扩展

#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;}