Display: the function and effect of align content, justify content and align items under flex

align-content attribute

effect ： Set the same column of child elements in Y Axis alignment

Property value	describe
flex-start	Arranged at the top of the current column
flex-end	Arranged at the bottom of the current column
center	Arrange in the middle of the current column
space-between	Equally spaced , No blank up and down
space-around	Equally spaced , The space left above and below is equal to half of the space

justify-content attribute

effect ： Set the same row of child elements in X Axis alignment

Property value	describe
flex-start	Arranged on the leftmost side of the current row
flex-end	Arranged on the far right of the current row
center	Arrange in the middle of the current row
space-between	Equally spaced , Leave no space on either side
space-around	Equally spaced , The space left on both sides is equal to half of the space

align-items attribute

effect ： Set the same row of child elements in Y Axis alignment

Property value	describe
flex-start	Arranged at the top of the current row
flex-end	Arranged at the bottom of the current row
center	Arrange in the middle of the current row
stretch	When the child element has no height set or is auto, Will fill the entire container
baseline	Align with the baseline of the first line of text of the child element