CSS align-items Property

Description

The align-items property aligns all the elements inside the flex container along the transverse axis, or aligns all the elements of the grid layout along the axis of the grid container column. In order to align all elements of the grid layout along the row axis, you can use the justify-items property.

Initial value
stretch
Applies to
All elements
Inherited
No
Media
Visual
Computed value
As specified
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.alignItems

Syntax

align-items: flex-start | flex-end | center | baseline | stretch

Values

  • flex-startElements are located at the beginning of the container line. 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-endElements are located at the end of the container line. For layout grid elements (grid elements), the abbreviated end value is allowed; for flex elements, the full flex-end value must be used.
  • centerElements are located in the center of the row of the container (middle of the transverse axis, or the axis of the column).
  • baselineElements are located on their baseline.
  • stretchFlex elements are stretched to fit the container along the transverse axis, layout grid elements are stretched along the column. This is the default value.

Example

<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 class="fontSize40">D</div><div>E</div><div>F</div><div>G</div><div class="fontSize40">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 class="fontSize40">D</div><div>E</div><div>F</div><div>G</div><div class="fontSize40">H</div></div>
body {
   display: flex;
   flex-wrap: wrap;
} 
.grid-container, 
.grid-container2, 
.grid-container3, 
.grid-container4, 
.grid-container5 {
   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-items: stretch;
}
.grid-container2 {
   align-items: start;
}
.grid-container3 {
   align-items: end;
}
.grid-container4 {
   align-items: center;
}
.grid-container5 {
   align-items: baseline;
}
.fontSize40 {
   font-size: 40px;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112522012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
52522012.196.0