1. Set the style on the parent box
1.display:flex; Let the box change Into a telescopic box
2.flex-direction control the direction of the main axis
flex-direction:row horizontally to the right;
flex-direction:column to the right vertically;
3.justify-content Spindle alignment
justify-content:flex-start ;to Align the starting position of the spindle
justify-content:flex-end; align to the end position of the spindle
justify-content:center; align the center
justify-content: space-between; Let the boxes be evenly distributed in the main axis direction
justify-content:space-around; Let the boxes be evenly distributed in the main axis direction, leaving no gaps at both ends
4 .align-items single-line alignment of the cross axis
align-items:flex-start; align to the start position of the cross axis
align-items:flex-end; go Align the end position of the side axis
align-items:center; align vertically to the side axis direction
align-items:stretch; stretch to the side axis direction, the box cannot be set height
p>
5.flex-wrap Control box wrapping
6.align-content Multi-line alignment of lateral axis
< p>align-content:flex-start; align to the start position of the lateral axis
align-content:flex-end; align to the end position of the lateral axis
align-content:center; Align vertically to the lateral axis
align-content:space-between; Let the boxes be evenly distributed in the lateral axis direction
align-content:spac e-around; Let the boxes be evenly distributed in the lateral axis direction, leaving no gaps at both ends
align-content:stretch; stretch to the lateral axis direction, the box cannot be set to height
< span style="font-size: 18pt;"> 2. Set the style in the child element
1. flex can allocate the remaining space of the main axis in fractions, and set the width and height after the layout After the box, redistribute space
2.order: Control the arrangement order of the child elements, the smaller the value, the higher the front.
3.align-self to control the alignment of oneself on the lateral axis
align-self::flex-start;; align to the starting position of the lateral axis
align-self:flex-end; align to the end of the lateral axis
align-self::center; align vertically to the lateral axis
align-self::stretch; to the side Stretching in the axial direction, the height of the box cannot be set