刚刚在接触到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 属性。手机端各个浏览器均支持。