码迷,mamicode.com
首页 > 其他好文 > 详细

flex box布局

时间:2015-08-17 11:50:48      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

例如

<div class="container">
    <div clas="left"></div>
    <div clas="center"></div>
    <div clas="right"></div>
</div>

flex box,有一个伸缩容器flex container 容器中的元素自动变成了伸缩项flex items,例子中container就是伸缩容器,left、center、right是伸缩项

给伸缩容器的css设 display:flex ; flex-flow:row/column/row wrap……

flex-flow为row,给伸缩项设width;flex-flow为column,设height;还可以设flex:value,按比例分配

目前css

.container{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

 

flex box布局

标签:

原文地址:http://www.cnblogs.com/danranysy/p/4736074.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!