CSS align-content Property

  2. CSS Properties
  3. align-content
If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!
☕ Buy a Coffee

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
Computed value
specified keyword
Animatable
discrete
JavaScript syntax
object.style.alignContent

Interactive Demo

One
Two
Three

Syntax

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

Values

  • startAligns the flexbox lines or grid items to the start of the cross axis.
  • endAligns the flexbox lines or grid items to the end of the cross axis.
  • 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

The following table will show you the current browser support for the CSS align-content property.

Desktop
Edge Chrome Firefox Opera Safari
122928169
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
292816924.4

Last updated by CSSPortal on: 31st December 2023

  • Sponsors
    • Copy Paste List - Copy and paste or download lists in your preferred format, including plain text, PDF, or HTML. Unicode Characters & Emojis - Search all Unicode characters and emojis plus other tools. Check Shortened URLs - Expand shortened URLs to view the destination link. Advertise Here - Advertise your company and products here!