Common methods of flexible box flex
Note:
Horizontal center: justify-content: center;
Vertical center: align-items: center;
Center: horizontal + vertical.
The flex-direction property-the position of the flex child element in the parent container.
flex-direction:
row: arranged horizontally from left to right (default).
row-reverse: Reverse horizontal arrangement, right-aligned, row from back to front, with the last item at the top.
column: arranged vertically.
column-reverse: Reverse the vertical arrangement, from back to front, with the last item at the top (before the newly created information row).
justify-content property-the main axis alignment.
justify-content:
align-items property— justify the vertical axis.
align-items:
flex-start: align at the beginning. (Top) The default
flex-end: align the end to the side. (Bottom)
center: centered.
flex-wrap property-the way the child elements of the flex box wrap .
flex-wrap:
nowrap: The flex container is a single line. In this case, the flexible child may overflow the container. (Default)
wrap: The flexible container is multi-line. In this case, the overflow part of the flexible sub-item will be placed on a new line, and a line break will occur inside the sub-item.
wrap-reverse: Reverse the wrap arrangement.
Picture source: https://www.runoob.com/css3/css3-flexbox.html