flex sub spindle in scale, the flex attribute is not specified, no stretching involved in distribution
1, the scaled limit value set flex
min-width minimum value min-width: 280px not be less than the minimum width 280px
max-width maximum value max-width: 1280px maximum width no greater than 1280px
2, Flex-direction to adjust the major axis direction (horizontal direction default)
vertically aligned column
column-reverse and column alignment opposite
row horizontal arrangement
row-reverse aligns the opposite row
. 3, The justify Content-adjustment spindle alignment (horizontal alignment)
flex-start, the default value, corresponding to left-aligned, box sequence constant
flex-end, corresponding to the right alignment, the order of the same box
center, corresponds centered
space-between, the left and right cassette box close to the parent, the average spacing distribution of the intermediate blank
space-around, each box is equivalent to adding a margin left margins
4, align-items side adjustment shaft alignment (vertical alignment (single))
Stretch, default values, so highly stretched applies subelements parent container (not a sub-element height premise)
center, vertical centering
flex-start, the alignment
flex-end, a bottom alignment
5, flex-wrap controls whether the line feed, the contents of the box when the width of the sub-boxes how to deal with the excess parent
nowrap, default values, does not wrap, shrink displayed in a row
wrap, split-line display
wrap-reverse, split line displayed in reverse order
6, flex-flow is flex-direction, flex-wrap shorthand
flex-flow：flex-direction flex-wrap；
Memory vernacular: flex-flow: not wrap transducer arrangement direction; with the two intermediate spaces
7, align-content stack (produced by separate row flex-wrap) the vertical alignment of a plurality of rows
Stretch, the default value, is stretched to accommodate container box
center, centered
flex-start, head alignment
flex-end, a bottom alignment
space-between, leaving project is located within the container blank between the rows
Before space-around, each line item is located, between, after the container are left blank
E.g:
display：flex；
flex-flow：row wrap；
align-content: center; // After setting the above two conditions, multiple rows of vertical will work
Must be set free parent element attribute box display: flex, and the arrangement is arranged laterally aligned flex-direction: row;
And set wrap, wrap-Flex: wrap ; this will act
8, order sub control the order of the positive-sequence ordered manner, from small to large.
An integer value to define the order, a small value the top surface , can be negative, the default value is 0
order：1；