1. Basic application of flex elastic box
1. What is a flexbox?
弹性盒子顾名思义：具有一定的弹性，也就是可以满足在不同
屏幕大小设备上自适应。
2. What is the composition of the elastic box?
弹性盒子由弹性容器和弹性子元素组成，一个盒子里可以有一个或者
多个子元素组成
3. How to achieve it?
当某个div属性中有display：flex时，此时该div即为弹性容器
默认的方向是从左自右，方向可以进行修改。
在body属性中设置direction(rtl,ltr)，此时整体的容器都是从
设置的方向开始的。
4. How many properties are commonly used in flexbox?
4.1 flex-direction attribute : specify the position of the child element in the container (reversing the arrangement direction means that the head and tail positions are also swapped)
row: Arrange from (left to right)
row-reverse: Reverse horizontal arrangement (right alignment, from back to front, the last item is at the front
column: Vertical arrangement
column-reverse: Reverse vertical arrangement, from back to front Front row, last item on top
①row effect
②row-reverse effect
③column effect
4.2justify-content attribute : the elastic item is aligned along the main axis of the elastic container (main axis)
flex-start: flex items are filled next to the beginning of the line
flex-end: flex items are filled next to the end of the line
center: flex items are centered next to each other
space-between: flex items are evenly distributed on the line
space-around: Flex items are evenly spaced across the line, leaving half the space between them
4.3align-items attribute: set or retrieve the alignment of the elastic box element in the direction of the lateral axis (X axis)
flex-start: The boundary of the starting position of the lateral axis (X axis) of the elastic box element is close to the starting boundary of the lateral axis of the row flex-end
: The boundary of the starting position of the lateral axis (X axis) of the elastic box element is tight Close to the line's side axis to end the border center : The flex box element is centered
on the line's side axis (X axis).
start' is equivalent to
stretch: the child element will be stretched to the same height or width as the parent element
4.4flex-wrap attribute: used to specify the wrapping method of the child elements of the elastic box
nowrap: default arrangement
wrap: the flexible container is multi-line, all child elements exceed the length and overflow, overflow child elements will start on a new line
wrap-reverse: reverse wrap arrangement
4.5align-content attribute: used to modify the behavior of the flex-wrap attribute.
Similar to align-items, but instead of setting the alignment of the elastic child elements, it sets the alignment of each row
stretch - default. The rows will stretch to take up the remaining space.
flex-start - Rows are stacked toward the start of the flex container.
flex-end - Rows are stacked toward the end of the flex container.
center - Rows are stacked toward the middle of the flex container.
space-between - Rows are evenly spaced within the flex container.
pace-around - the lines are evenly spaced within the flex container, leaving half the space between the child elements at both ends
4.6align-self attribute: used to set the alignment of the elastic element itself in the direction of the lateral axis (vertical axis)
auto: If 'align-self' has a value of 'auto', its computed value is the 'align-items' value of the element's parent, or 'stretch' if it has no parent.
flex-start: The boundary of the starting position of the flex box element's side axis (vertical axis) is close to the starting boundary of the line's side axis.
lex-end: The edge of the start position of the flexbox element's lateral axis (vertical axis) is close to the end edge of the line's lateral axis.
center: The flexbox element is centered on the row's cross (vertical) axis. (If the size of the line is smaller than the size of the flexbox element, it will overflow the same length in both directions).
baseline: If the inline axis of the flexbox element is the same as the side axis, this value is equivalent to 'flex-start'. In other cases, this value will participate in the baseline alignment.
stretch: If the attribute value of the specified cross-axis size is 'auto', its value will make the size of the margin box of the item as close as possible to the size of the row, but at the same time it will follow the 'min/max-width/height' attribute limit.
4.7flex attribute: used to specify how to allocate space for elastic sub-elements
auto: The calculated value is 1 1 auto
initial: The calculated value is 0 1 auto
none: The calculated value is 0 0 auto
inherit: Inherit from the parent element
[ flex-grow ]: Define the expansion ratio of the elastic box element.
[ flex-shrink ]: Define the shrink ratio of flex box elements.
[ flex-basis ]: Defines the default base value for flex box elements.
5. Alignment
设置margin：auto水平垂直居中