Flexbox is short for flexible box (Note: meaning "flexible container box"), is the new layout mode CSS3 introduced. It determines how to arrange elements on the page, so that they can show up in different screen sizes and devices predictably.
It is called flexbox, because it is capable of expansion and contraction of the flex elements within the container, to fill the available space maximum . Compared with the previous layout (e.g., layout table element and the inner block floating elements), Flexbox is a powerful way:
Since a habit flex my basic layout for much of the float.
flex property range, but can be divided into two categories: Properties and children of the parent container, almost all of the property values and arrangement, alignment, covers three types of characteristics associated.
1. Parent Container Property
| Style for the parent element | value | effect | Characteristics Category |
| flex-direction | row、row-reverse、column、column-reverse | Child arrangement direction is defined within the container | arrangement |
| flex-wrap | nowrap、wrap、wrap-reverse | Wrapping defined subkey results in the container | arrangement |
| flex-flow | flex-flow is shorthand for flex-direction property and flex-wrap, the default value row nowrap | flex-flow is shorthand for flex-direction property and flex-wrap, the default value row nowrap | arrangement |
| justify-content | flex-start、center、flex-end、space-between、space-around | Child defined in the horizontal alignment of the container | Align |
| align-items | flex-start、center、flex-end、baseline、stretch | Vertical alignment mode is defined within the container | Align |
| align-content | flex-start、center、flex-end、space-between、space-around、stretch | Define a plurality of rows in the child vertical alignment of the entire container | Align |
2. The sub-item properties
| Style for child elements | value | effect | Characteristics Category |
| order | Need to integerinteger |
The order attribute definition items. The smaller the value, the more forward arrangement, the default is 0 | arrangement |
| flex-grow | <number> | Extended attributes amplification ratio defined project, the default is 0that if there is free space, not enlarged. Negative value of the property is invalid |
Footprint |
| flex-shrink | <number> | Attribute defines the reduced scale of the project, the default is 1, that is, if space is insufficient, the project will be reduced. Negative value of the property is invalid | Footprint |
| flex-basis | number or percentage | Property defines before allocating extra space, the project space occupied by the spindle its default value auto, a negative value for the property invalid |
Footprint |
| flex | The default value0 1 auto，后两个属性可选 |
Shi flex-grow, flex-shrink and flex-basisshorthand |
Footprint |
| align-self | flex-start、center、flex-end、baseline、stretch | Attribute allows a single item with other items has a different alignment, covering align-itemsproperties. It represents inherit the parent element of the align-itemsproperty, if no parent is equivalent tostretch |
Align |