Child elements within a container after flex layout can be considered inline block elements by default
The parent attribute
Attribute name: flex-direction/flex-wrap/justify-content/align-items/align-content(higher priority than align-items)
Flex-direction :row/row-reverse/column/column-reverse // Which direction is the main axis
Flex-wrap: wrap/nowrap/wrap-reverse //
Justify -content: / flex-start/flex-end/center/space-between (not empty at the beginning and end of the axis) Space -around (the space between each child element is the same as the space at the beginning and end of the axis) // the arrangement in the main axis
Align -items(side axis alignment): The flex – start (default) | | flex – end center | baseline (according to the baseline of child element font, let a child element font at the same level) | stretch (child element didn’t set the height that is able to take effect)
Align-content (alignment of multiple spindles on intersecting axes) : The flex – start | flex – end | center | space – between | space – around | stretch (open the default values, according to the content. Align-content has a higher priority than align-items if the child element has no specified height
Flex member Properties
Member attributes: Order /flex-grow/flex-shrink/flex-basis/flex(short for the first three attributes)/align-self
Order (The lower the weight, the higher the order of this element)
Flex-grow (whether the element is enlarged, default is not enlarged, that is, flex-grow: 0)
Flex-shrink (shrink elements, default is 1)
Flex-basis (default is auto, if 0, the width attribute of the child element is not in effect, i.e. the child element is considered inline instead of block-level)
flex: flex-grow flex-shrink flex-basis
Flex: Auto, flex: 1, 1, auto
flex: 0 (0 , 0 , 0)
flex: 1 (1, 1, auto)
Flex The default value is flex: 0 1 auto
flex: none(0 0 auto)
To evenly divide the child elements (the child element has no width: only flex 1 is valid, the child element has width: flex 1 and auto are valid) align-self: when the child is aligned on the side axis
Align-item: stretch differs from align-content: stretch
Align-content: “stretch” is set. The default value of align-content is “stretch”
Align-items: stretch and align-content: stretch are set together
Align-content: a non-stretch value invalidates the align-items’ stretch
