CSS align-content attribute, cssalign-content

CSS align-content attribute, cssalign-content
Instance

Align the items of the <div> element of the elastic box:

1. Div
2. {
3. Display: flex;
4. Flex-flow: row wrap;
5. Align-content: space-around;
6. }

Browser support for copying preview results

The number in the table indicates the version number of the first browser that supports this attribute.

The number following-webkit-,-ms-, or-moz-is the first version that supports this prefix attribute.

Attribute
Align-content	21.0	11.0	28.0	9.0 7.0-webkit-	12.1

Definition and usage

Align-content attributes align items (vertical) in the container when items in the elastic container do not occupy all available space on the cross axis ).

Tip: Use the justify-content attribute to align items on the spindle (horizontal ).

NOTE: The container must have multiple lines of projects to render the effect.

Default Value:	Stretch
Inheritance:	No
Animations:	No. SeeCSS3 animation attributes and CSS3 animation instances.
Version:	CSS3
JavaScript Syntax:	Object. Style. alignContent = "center" effect Preview

 

CSS syntax align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit; default value

Value	Description	Test
Stretch	Default value. The project is stretched to adapt to the container.	Effect Preview
Center	The project is located in the center of the container.	Effect Preview
Flex-start	The project is at the beginning of the container.	Effect Preview
Flex-end	The project is at the end of the container.	Effect Preview
Space-	The project is located in a blank container between each row.	Effect Preview
Space-around	The project is located in a blank container before, between, and after each row.	Effect Preview
Initial	Set this property to its default value. SeeInitial.	Effect Preview
Inherit	This attribute is inherited from the parent element. SeeInherit.