flex-direction property determines the main direction (i.e., the arrangement direction of the project).
Row (default): spindle horizontal direction, the starting point at the left end;
Reverse-Row : spindle in the horizontal direction, starting at the right end ;
column : main vertical direction, the starting point on the edge.
Reverse-column : a vertical direction of the spindle, along the lower starting point.
② Flex-wrap property definition, if the row axis less than one, how wrap.
nowrap (default): Do not wrap. When the container is not wide enough, the width of each item will be squeezed;
wrap : wrapping, and the top of the vessel a first line;
Reverse-wrap : wrapping, and the bottom of the first container row.
③ flex-flow is flex-direction and flex-wrap abbreviated form, the default value is: Flex-Flow: Row wrap; not too much explanation
④ The justify-Content attribute defines the project is aligned on the spindle.
>>> This property is closely related to the spindle direction.
Spindle direction: row- starting point on the left, Row-reverse- starting point on the right, column- starting point at the top, column-reverse- starting point at bottom
Start-Flex (default): The project is located in the spindle starting point.
End-Flex : Project is located in the spindle end.
Center : center
BETWEEN-Space : justification, the spacing between the items are equal. ( Beginning and final project, and no parent container edge interval )
around-Space : at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border. ( First and last project, with the edge of the parent container there is a certain interval )
EVENLY-Space : at equal intervals on both sides of each item. Therefore, the gap between the project and the project with the spacing of the border the same .
⑤ align-items attribute defines how items in a cross-axis alignment.
Start-Flex : starting cross-axis alignment.
End-Flex : end cross-axis alignment.
Center : midpoint of the cross-axis alignment.
baseline: first line of text in the project baseline alignment. ( High lines of text, the font size will affect the baseline of each line )
the Stretch (default): If the project height is not set or set to Auto , occupies the entire height of the container.
⑥ align-content attribute defines a plurality of axes alignment. If the project is only one axis, the property does not work.
( When item replaced multiple rows, can be used align-content unsubstituted align-items)
Start-Flex : the starting point is aligned with the cross shaft.
End-Flex : aligned with the end of the cross shaft.
Center : aligned with the midpoint of the cross shaft.
BETWEEN-Space : both ends of the cross-axis alignment, the average spacing between the axes of the distribution.
around-Space : the axis of each of both edges are equal. Therefore, the spacing between the axes twice the size of the interval axis border.
Stretch (default): axis occupies the entire cross-axis.