弹性盒子（Flex Box）是css3一种新的布局模式。

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。弹性容器通过设置display属性为flex或inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

flex属性设置在弹性子元素上，是flex-grow, flex-shrink, flex-basis三个属性的缩写，默认值为 0 1 auto。

flex-grow属性定义子元素的放大比例，默认为0，表示如果存在剩余空间，也不放大。

如果所有子元素的flex-grow属性都为1，则他们将等分剩余空间（如果有的话）。

如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义子元素的缩小比例，默认为1，表示如果空间不足，该子元素将缩小。

如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个子元素的flex-shrink属性为0，其他子元素都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，子元素占据的主要空间（main size）。

Toolbar是一个弹性容器，可以加入一个分割用的子元素，把子元素后的内容都推到另外一边去。

<span class="toolbar-separator"></span>

.toolbar-separator {

    flex: 1 1 auto;

}