flex with a good layout, a lot of advantages: the static stream file, the concept of space, you can simply adjust the mainstream style, while supporting bfc, can dynamically allocate space, professional one-dimensional spatial layout
So many advantages, so to promote the use of elastic layout.
Space is provided: flex direction, the positioning of these can be re-set the parent node.
Internal single setting : extensible, compressible, accounting, accounting for the remaining space, independent alignment. The need to set the child node.
You need to learn to configure, can be abbreviated flex-item attributes: Flex-Grow | Flex-Shrink | Flex-Basis | the Order | align = left-Self .
And a digital auto, for example :
Flex: 1 auto; // Flex: Like auto effect
After the browser parses is: two variable attributes, is set to 1, the last base width and height set to auto, the highest priority described flex properties are flex-basis, in order to make adjustments to the value of the point.
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
none, a class of special settings:
flex: none; // loses its elasticity effect, and display: block; width: auto; the same effect, pay attention: there are none set plus other value is illegal.
After parsing the browser:
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
A number of circumstances:
flex: 1;
After the browser parses: non-child nodes are usually like this on flex: 1, is one such case, a child node to handle all item parameters contraction and growth space, it can be divided proportionally.
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
Two numbers of cases:
flex: 2 1;
After parsing the browser:
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
Three digits situation
flex: 2 1 2; // not legal, the base value must be available unit, such as a percentage, px, em these specific units.
Flex: 2 2 5%; // ah, so legitimate.