CSS3多栏布局display新属性flex

admin 发布时间:2015-11-18 分类:Web 阅读:1737次 添加评论

刚刚在接触到display: flex;这个css属性。伸缩容器(flex  containers)是一个HTML标签元素,需要“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items),即Flexbox布局由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

Flexbox布局中有一个flex容器的属性 flex-flow:<' flex-direction '> || <' flex-wrap '>。

flex-flow设置或检索弹性盒模型对象的子元素排列方式。

  • <' flex-direction '>:定义弹性盒子元素的排列方向。

  • <' flex-wrap '>:控制flex容器是单行或者多行。

例:

.container{ display: flex; flex-flow: row wrap; } 
/*   row横向(左向右)显示 column竖向(上向下)显示 ; wrap一行显示不完的时候换行     */
.cell{-webkit-flex:1;-moz-flex:1;flex:1} 
.chat{-webkit-flex:0.5;-moz-flex:0.5;flex:0.5;}
/*   flex的值设置子元素的宽度。 其宽度是flex/(flex总和) 类似于百分比    */

如果伸缩容器设置了“wrap”属性值,当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。

如下设置了一个三列部署,客服窗口设置的宽度为0.5/2.5(总宽度的20%)。购物车,立即购买两个按钮宽度各为40%。

<div class="container">

    <button id="chat" class="cell chat">客服</button>

    <button id="joinitem_b" class="cart cell" >加入购物车</button>

    <button id="additem_b" class="buy cell" >立即购买</button>

</div>

备注:Firefox、Opera 和 Chrome 支持 flex-flow 属性。手机端各个浏览器均支持。

关键字词: CSS3display:flex

暂无留言

发表评论:

◎欢迎您的参与讨论。