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

<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>
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; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112292812.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292812.19.2Yes