Align items and align content in flex layout

Definition

align-items : Attribute definitions flex children stay flex Container of Current row The side axis of （ The vertical axis ） In the direction of Alignment mode .

center： The element is in the center of the container .
The elastic box element is on the side axis of the line （ The vertical axis ） Top center .（ If the size of the line is smaller than the size of the elastic box element , It will overflow the same length in both directions ）.
align-items:center

align-content： All lines inside the free box will be set as all in one Arrange vertically . in the light of Multiple lines The arrangement on the vertical axis as a whole , This attribute is not valid for single line .

center： The element is in the center of the container .
Each row is stacked towards the middle of the elastic box container . Each line is close to each other and aligned in the middle of the elastic box container , Keep the distance between the beginning content boundary of the side axis of the elastic box container and the first row equal to the distance between the end content boundary of the side axis of the container and the last row .（ If the rest of the space is negative , Then each line will overflow an equal distance in both directions .）
There must be... In the container Multiple lines Project , This attribute can render the effect .

Be careful

align-items and align-content It has the same function , But the difference is that it is used to make everyone A single Instead of centering the entire container .

Because both are defined in flex Position of the element in the layout , therefore align-items And align-content To work with display：flex Use it together

expand

1. flex Layout ：Flex yes Flexible Box Abbreviation , Translated into Chinese “ Elastic box ”, Used to provide maximum flexibility for boxed models . Any container can be specified as Flex Layout .
2. use Flex Elements of layout , be called Flex Containers （flex container）, abbreviation ” Containers ”. All its child elements automatically become container members , be called Flex project （flex item）, abbreviation ” project ”.
   

Reference resources ：
Reference resources 1
Reference resources 2（ Rookie programming ）