An elastic cassette (Flex Box) is a new css3 layout patterns.
Flexible container made of an elastic cassette (Flex container) and the resilient sub-elements (Flex item) composition. Elastic container by setting display properties to flex or inline-flex to be defined as elastic container.
The elastic container comprises one or more resilient sub-elements.
flex property provided on the elastic sub-elements, a flex-grow, abbreviated flex-shrink, flex-basis three attributes, the default value 0 1 auto.
Enlarged scale flex-grow attribute defines sub-elements, the default is 0, meaning if there is free space, not enlarged.
If the flex-grow attributes of all child elements are 1, they will be equally divided the remaining space (if any).
If a child element of flex-grow attribute is 2, the other child elements are 1, the remaining space occupied by the former than the other items more than doubled.
Reduction ratio flex-shrink attribute defines child elements, the default is 1, indicates if the space is insufficient, the child elements will be reduced.
If the flex-shrink properties of all child elements are 1, when there is insufficient space will be scaled down.
If a child element of flex-shrink property is 0, the other child elements to 1, when the lack of space, the former does not shrink.
flex-basis attribute defines the primary space before allocating the extra space occupied by the sub-elements (main size).
Toolbar container is a flexible, may be added to the splitting of a sub-elements, contents of the sub-elements are pushed to the other side.
<span class="toolbar-separator"></span>
.toolbar-separator {
flex: 1 1 auto;
}