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
11	12	52	20	12.1	9
Tablets / Mobile
52	52	20	12.1	9	6.0

Last updated by CSSPortal on: 5th November 2019