For details about the align-content attribute in css, cssalign-content

For details about the align-content attribute in css, cssalign-content

Align-content

Purpose:

The vertical arrangement of items in the free box is set.

Condition:
You must set the free box attribute display: flex; for the parent element, and set the arrangement mode to horizontal flex-direction: row; and set the line feed, flex-wrap: wrap; in this way, the setting of this attribute will take effect.
Set object:

This attribute is used to set the parent element of the project in her container.

Valid value:
Stretch: by default, the space occupied by each project in the container is stretched, and the fill mode is to add a blank space under each project. By default, the first project is arranged at the top of the container.

<!DOCTYPE=html>
 

Center: This removes the gaps between projects and centers all projects vertically.
<! DOCTYPE = html> 


Flex-start: This cancels the gap between projects and places the projects on the top of the container.
<! DOCTYPE = html> 

Flex-end: This removes the gaps between projects and places the projects at the bottom of the container.
Align-content: flex-end;


Space-between: this will make the project aligned at both ends of the vertical direction. That is, the above project is aligned to the top of the container, and the bottom project is aligned to the bottom of the container. Keep the same interval between each project.
Align-content: space-;


Space-around und: This will keep the same length of white Space in the upper and lower positions of each project, so that the white Space between projects is twice that of a single project.
Align-content: space-around;


Inherit: this attribute of an element inherits from its parent element.
Innitial: the attribute of the element is the default initial value.