There are a lot of flex content, and some properties currently used are recorded first, and they will continue to be improved when they are used later.
The properties set in the flex container:
(1) justify-content: the alignment in the horizontal direction.
(2) align-items: the vertical alignment.
The attributes set in the child elements of the flex container:
(1) flex-grow: The default value is 0, that is, no zoom. When the value of all child elements is 1, the child elements equally divide the remaining space (if any). If the value of a certain child element is 2 and the value of other child elements is 1, then the former has twice the space of other child elements
(2) flex-shrink: the default value is 1. When the space is insufficient, if the values of all sub-elements are set to 1, all the sub-elements will be reduced proportionally; if a certain sub-element is set to 0 and the others are all 1, the former will not be reduced, and the latter will be reduced in equal proportions.
(3) flex-basis: The default value is auto, which is the width of the element itself. The priority of flex-basis is higher than the width set by the element itself.
(4) flex: shorthand for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. Setting value auto: 1 1 auto. Setting value none: 0 0 auto.