The opening

The W3C recommendation states that align- Conten works for multiple lines, something I didn’t notice before.

Flex Base Example

contrast

Next we compare single and double align-items and align-center

A single

The instance

conclusion

• In the single row case,align-items:center;Center the element, centering and aligned on the cross axis.
• Single-line, setalign-content:center;There is no change.

The instance

flex-wrap:wrap; The default is multiple lines, although the parent is wide enough for children to display on a single line. Flex-wrap :wrap; After that, the subitem surface still shows a single line but align-content: Center is in effect, centering the single line element as a whole.

Multiple lines

The instance

conclusion

• Multiple rows,flex-wrap:wrap;Split the subterm into two lines,align-items:centerCenter the child on the cross axis of its own row.
• Multiple rows,align-content:centerTake the subitems as a wholeAligned on the cross axis, individual subitems are not aligned in the self-centers.

Compared with the align – self

Align-self applies to a single child that overrides the value of align-items

• Align-self overwrites the value of align-items
• align-self:flex-endoverwritealign-conten:centerBut it makes the green child aligned at the end of the whole rather than the end of the parent
• In the parent of the align-content effect, align-self aligns the child with its overall intersecting axis

conclusion

• Align-items aligns the child items on the cross axis, single or multiple lines, and single items are aligned.
• Align-content aligns as a whole when there are multiple lines of children, while individual children remain unchanged.
• flex-wrap:wrap; You can make the align-content show a single line alignment (essentially multiple lines, with the second line height zero).
• Align-self applies to subitems and overwrites the values of align-items and align-content in different scopes.