About the Align-content property in CSS

Align-content

Role:

Sets the vertical arrangement of each item in the Free box.

Conditions:
The Free Box property Display:flex must be set on the parent element, and the arrangement is arranged horizontally flex-direction:row, and the wrapping is set to Flex-wrap:wrap, so the setting of this property will work.
To set the object:

This property works on the items inside her container and sets the parent element.

Value:
Stretch: The default setting stretches the space occupied by each item in the container, filling it up with padding below each item. The first item is arranged by default from the top of the container.

<! doctype=html>{width:200px;Display:Flex;flex-direction:Row;Flex-wrap:Wrap;align-content:Strech;Height:200px;Background-color:Grey;}. Son1{Height:30px;width:100px;Background-color:Orange;}. Son2{Height:30px;width:100px;Background-color:Red;}. Son3{Height:30px;width:100px;Background-color:#08a9b5;}</style>

Center: This cancels the gaps between the items and centers all the items vertically.

<! doctype=html>{width:200px;Display:Flex;flex-direction:Row;Flex-wrap:Wrap;align-content:Center;Height:200px;Background-color:Grey;}. Son1{Height:30px;width:100px;Background-color:Orange;}. Son2{Height:30px;width:100px;Background-color:Red;}. Son3{Height:30px;width:100px;Background-color:#08a9b5;}. Son4{Height:30px;width:100px;Background-color:#9ad1c3;}. Son5{Height:30px;width:100px;Background-color:RGB (21,123,126);}</style>

Flex-start: This cancels the gap between the items and puts the item on top of the container.

<! doctype=html>{width:200px;Display:Flex;flex-direction:Row;Flex-wrap:Wrap;align-content:Flex-start;Height:200px;Background-color:Grey;}. Son1{Height:30px;width:100px;Background-color:Orange;}. Son2{Height:30px;width:100px;Background-color:Red;}. Son3{Height:30px;width:100px;Background-color:#08a9b5;}. Son4{Height:30px;width:100px;Background-color:#9ad1c3;}. Son5{Height:30px;width:100px;Background-color:RGB (21,123,126);}</style>

Flex-end: This cancels the gap between the items and puts the item at the bottom of the container.

Align-content:flex-end;

Space-between This causes the item to be aligned on both sides of the vertical direction. That is, the item above aligns to the top of the container, and the bottom item is aligned to the base of the container. Leave the same interval between each item.

Align-content:space-between;

Space-around: This will keep the same length blank for each item's top and bottom position, making the blank space between items twice times the size of a single item.

Align-content:space-around;

Inherit: Causes this property of an element to inherit from its parent element.
Innitial: Makes the element this property the default initial value.

About the Align-content property in CSS