CSS align-items Property


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
Applies to
All elements
Computed value
as specified
JavaScript syntax


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


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


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

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

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 19th September 2023