使用css中的flexbox属性布局

直接上例子：

例子1、

例子网址：http://www.w3cschool.cc/try/try.php?filename=trycss3_flex

实现：

<style>

#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;/*启用flexbox*/
}
#main div
{
flex:1;/*让每个div都占1份，共3个div，共3份，所以每个div都占1/3*/
}

</style>

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

例子2、

例子网址：http://zh.learnlayout.com/flexbox.html

实现

<style>

.container{  

display: -webkit-flex;  

display: flex;}

.initial { 

 -webkit-flex: initial;          

flex: initial; /*在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩。*/ 

width: 200px;  

min-width: 100px; }

.none {  

-webkit-flex: none; /*任何情况下都不会被收缩。*/ 

flex: none;  

width: 200px; }

.flex1 {  

-webkit-flex: 1;          

flex: 1; /* flex1占除了initial和none剩下的部分中的1份，共3份，占1/3 */

}

.flex2 {  

-webkit-flex: 2;          

flex: 2; /* flex2占除了initial和none剩下的部分中的2份，共3份，占2/3 */

}

 </style>

<div class="container">

<div class="initial"></div>

<div class="none"></div>

<div class="flex1"></div>

<div class="flex2"></div>

</div>

了解更多：http://segmentfault.com/a/1190000000707526

再了解更多^ ^：http://www.w3cplus.com/blog/666.html