First, the attributes defined in the six container;
1、flex-direction；
Axis direction is determined, that the arrangement direction of the project.
属性值：row、row-reverse、column、column-reverse；
2、flex-wrap；
If less than an axis defined row, how to wrap.
Property value: nowrap(Default): Do not wrap. wrap: Wrap, over the first line. wrap-reverse: New line, the first line below.
3、flex-flow
flex-flow property is shorthand for flex-direction property and flex-wrap attribute defaults to row nowrap.
4、justify-content
Defines project is aligned on the spindle.
属性值：flex-start、flex-end、center、space-between、space-around。
5、align-items
Defines how to align the sensitive axis projects.
flex-start, flex-end, center, stretch (the baseline of the first line of text items aligned), baseline (or if the item is not set to the height of auto, occupies the entire height of the container).
6、align-content
align-contentProperty defines a plurality of axes alignment. If the project is only one axis, the property does not work.
flex-start, flex-end, center, stretch (axis occupies the entire cross-axis), space-between (aligned with the cross shaft at both ends, an average distance between the axes of the distribution), space-around (on both sides of each axis intervals are equal. Therefore, the interval is larger than the interval between the axes of the axis of the double frame).
Second, the definition of property in the project.
1、order
The order attribute definition items. The smaller the value, the more forward arrangement, the default is 0.
2、flex-grow
Property defines an enlarged scale project, by default 0, i.e., if there is free space, not enlarged.
If all items of flex-growproperty are 1, they will be equally divided the remaining space (if any). If an item of flex-growproperty to 2, other projects are 1, then the remaining space is occupied by the former than the other items more than doubled.
3、flex-shrink
Attribute defines the reduced scale of the project, the default is 1, that is, if space is insufficient, the project will be reduced.
If all items of flex-shrinkproperty are 1, when the lack of space, will be scaled down. If an item of flex-shrinkproperty is 0, other projects are 1, when the lack of space, the former does not shrink.
Invalid negative value of the property.
4、flex-basis
flex-basisAttribute defines the spindle space before allocating extra space, occupied by the project (main size). Browser Based on this property, calculate the spindle if there is extra space. The default is autothat the original size of the project.
It can be set with widthor heightattribute the same value (such as 350px), the project will occupy a fixed space.
5、flex
flexAttribute flex-grow, flex-shrink and flex-basisthe abbreviations, the default value 0 1 auto. After two optional attributes.
This property has two shortcut value: auto ( 1 1 auto) and none ( 0 0 auto).
It recommended that priority use of this property, rather than write a separate three separate properties, because the browser will calculate the correlation value.
6、align-self
align-selfAttribute allows a single item with other items has a different alignment, covering align-itemsproperties. The default value autoindicates the parent element inherited align-itemsattributes, if no parent, it is equivalent to stretch.
This attribute may take six values, in addition to auto, the other is fully consistent with the align-items property.
Taken https://www.bbsmax.com/A/GBJrl0Ead0/
The original site illustrates in great detail, I can not remember to write down when you need to use to take over, so the picture is not posted, you need to learn to be the original site of learning;