The CSS align-content property is used to align a flex container’s lines when there is an extra space in the cross-axis. It is one of the CSS3 properties. If the flex box contains only one line, then this property will not affect. It needs multiple lines within a flexible container.
The default value of this property is “ stretch “. It will make items fit into the container.
- The align-content property accepts the following values.
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
Syntax:
align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit; Values:
| Value | Description |
|---|---|
| stretch | This is the default value of an align-content property. It makes items fit into the container. |
| center | It will place the items at the center of the container. |
| flex-start | This property will place the items at the beginning of the container. |
| flex-end | It helps to place the items at the end of the container. |
| space-between | This property is used to place the items between the lines. |
| space-around | It distributes items with equal space between them. |
| initial | This will make the property use its default value. |
| inherit | It can inherit the property from its parent element. |
Align-Content Property with Stretch Value:
The following code uses align-content property with stretch value.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> #example { width: 70px; height: 300px; padding: 0; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: stretch; display: flex; flex-flow: row wrap; align-content: stretch; } #example li { width: 70px; height: 70px; list-style: none; } </style> </head> <body> <h2>Align-content: stretch; example</h2> <ul id="example"> <li style="background-color:#8ebf42;"></li> <li style="background-color:#1c87c9;"></li> <li style="background-color:#666;"></li> </ul> </body> </html> Result:
From the above code, we can get the result as given in the below image.
Align-Content Property with center Value:
You can use the below-given code to align-content in center of the page.
<!DOCTYPE html> <html> <head> <style> #example { width: 70px; height: 300px; padding: 0; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: center; display: flex; flex-flow: row wrap; align-content: center; } #example li { width: 70px; height: 70px; list-style: none; } </style> </head> <body> <h2>Align-content: center</h2> <ul id="example"> <li style="background-color:#8ebf42;"></li> <li style="background-color:#1c87c9;"></li> <li style="background-color:#666;"></li> </ul> </body> </html> Result:
After running the above code, we will get the output as shown in the below image.
Align-Content Property with flex-start Value:
The following code will apply the align-content property with flex-start value.
<!DOCTYPE html> <html> <head> <style> #example { width: 70px; height: 300px; padding: 0; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-start; display: flex; flex-flow: row wrap; align-content: flex-start; } #example li { width: 70px; height: 70px; list-style: none; } </style> </head> <body> <h2>Align-content: flex-start</h2> <ul id="example"> <li style="background-color:#8ebf42;"></li> <li style="background-color:#1c87c9;"></li> <li style="background-color:#666;"></li> </ul> </body> </html> Result:
By executing above code, you will get the output as follows.
Align-Content Property with flex-end Value:
To know how to use align-content property with flex-end value, use the following code.
<!DOCTYPE html> <html> <head> <style> #example { width: 70px; height: 300px; padding: 0; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; } #example li { width: 70px; height: 70px; list-style: none; } </style> </head> <body> <h2>Align-content: flex-end</h2> <ul id="example"> <li style="background-color:#8ebf42;"></li> <li style="background-color:#1c87c9;"></li> <li style="background-color:#666;"></li> </ul> </body> </html> Result:
After executing the above code, you can get the result as shown in the below image.
Align-Content Property with space-between Value:
You can use the following code to know how to align content with space between them.
<!DOCTYPE html> <html> <head> <style> #example { width: 70px; height: 300px; padding: 0; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: space-between; display: flex; flex-flow: row wrap; align-content: space-between; } #example li { width: 70px; height: 70px; list-style: none; } </style> </head> <body> <h2>Align-content: space-between</h2> <ul id="example"> <li style="background-color:#8ebf42;"></li> <li style="background-color:#1c87c9;"></li> <li style="background-color:#666;"></li> </ul> </body> </html> Result:
After running the above code, you will see that the content are aligned with space between them as shown in the below screenshot.
Align-Content Property with space-around Value:
You can apply the following code to align the content with space around them.
<!DOCTYPE html> <html> <head> <style> #example { width: 70px; height: 300px; padding: 0; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: space-around; display: flex; flex-flow: row wrap; align-content: space-around; } #example li { width: 70px; height: 70px; list-style: none; } </style> </head> <body> <h2>Align-content: space-around</h2> <ul id="example"> <li style="background-color:#8ebf42;"></li> <li style="background-color:#1c87c9;"></li> <li style="background-color:#666;"></li> </ul> </body> </html> Result:
From the above code, you can get the output as given in the below image.
Browser-Support
The post CSS align-content Property appeared first on Share Point Anchor.
Top comments (0)