admin 发布时间:2015-11-18 分类:Web 阅读:4694次 添加评论
刚刚在接触到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
发表评论:
◎欢迎您的参与讨论。