弹性盒子（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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
