CSS align-items Property

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-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
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.alignItems

Interactive Demo

align-items: stretch;

align-items: center;

align-items: start;

align-items: end;

One

Two

Three

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

HTML

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

CSS

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

Result

Editor