CSS align-content Property

Description

The align-content property determines how the browser distributes the space between and around the flex elements along the transverse axis of the container (vertically), or aligns the entire grid layout along the axis of the grid container column. In order to determine how the browser distributes the space between and around the flex elements along the main axis of the container (horizontally), or aligns the entire grid layout along the axis of the row of the grid container, you can use the justify-content property

Initial value: stretch
Applies to: Multi-line flex containers
Inherited: No
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.alignContent

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

Values

flex-startLines inside the container are located at the beginning of the transverse axis of the flex container, or the initial edge of the grid of the grid container. For layout grid elements (grid elements) the abbreviated start value is allowed, for flex elements it is necessary to use the full flex-start value.
flex-endLines inside the container are located at the end of the transverse axis of the flex container, or along the edge of the grid of the grid container. For layout grid elements (grid elements), the abbreviated end value is allowed; for flex elements, the full flex-end value must be used.
centerLines inside the container are located in its center.
space-betweenThe lines inside the container are evenly distributed, with the first line being positioned at the beginning of the transverse axis, and the last line being positioned from the end of the transverse axis.
space-aroundLines inside the container are evenly distributed, while the space between two adjacent lines is the same, and the empty space before the first line and after the last line is half of the space between adjacent lines.
space-evenlyPlaces an even space between each line, including the top and bottom edges of the container.
stretchThe lines inside the container stretch evenly, filling the free space (resizes the grid elements, or flex elements so that the elements fill the entire height of the container). This is the default value.

Example

HTML

<body>

<div class="grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div> 

<div class="grid-container2"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div> 

<div class="grid-container3"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>

<div class="grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>

<div class="grid-container5"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>

<div class="grid-container6"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>

</body>

CSS

body {
   display: flex; 
   flex-wrap: wrap;
} 
.grid-container, 
.grid-container2, 
.grid-container3, 
.grid-container4, 
.grid-container5, 
.grid-container6 {
   display: inline-grid;
   grid: auto / repeat(4, 1fr); 
   height: 120px;
   width: 30%;
   background: rgb(0,150,208);
   margin: 10px;
   text-align: center;
}
div>div { 
   background: rgb(241,101,41); 
   border: 1px solid;
} 
.grid-container {
   align-content: stretch;
}
.grid-container2 {
   align-content: start;
}
.grid-container3 {
   align-content: end;
}
.grid-container4 {
   align-content: center; 
}
.grid-container5 {
   align-content: space-between; 
}
.grid-container6 {
   align-content: space-around; 
}

Result

Browser Support

Desktop

11	12	29	28	12.1	9

Tablets / Mobile

4.4	29	28	12.1	9	2.0

Last updated by CSSPortal on: 5th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu