<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section class="row">
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
</section>
<section class="row">
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
<div class="column">One Twelve</div>
</section>
在本例中用到了flex-grow,flex-shrink,flex-basis三个属性。
1. flex-grow：根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
如果所有伸缩项目的“flex-grow”设置了“1”，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。负值无效。
2. flex-shrink：根据需要用来定义伸缩项目收缩的能力。负值同样无效。
3. flex-basis： 用来设置伸缩基准值，剩余的空间按比率进行伸缩，不支持负值。如果设置为0，围绕内容的额外的空间不会考虑在内。如果设置为auto，额外的空间是基于flex-grow的值分配。
