The CSS **`align-items`** property is used to align children elements inside a flex or grid container element. `align-items` sets the `align-self` value on all direct children as a group.  
In **Flexbox**, it controls the alignment of items on the Cross Axis. In **Grid Layout**, it controls the alignment of items on the Block Axis within their grid area.

# Implementation

We make the container a Flexbox by setting `display: flex`. Next, we set the `align-items` property to the `center` value, which aligns each `div` item in the center. 
 
>Try experimenting with different values like `stretch` and `start` for `align-items`.

#container {
  width: 150px;
  height: 100px;
  border: 1px solid black; 
  display: flex;
  align-items: center;
}

#container div {
  flex: 1;
  border: 1px solid black;
  margin: 1px;
  background-color: lightblue;
}

<html>
 <head>
 </head>
 <body>
   <div id="container"/>
      <div>One</div>
      <div>Two</div>  
      <div>Three</div>
    </div>
 </body>
</html>




codemirror

How to align elements in flex and grids

Align-items property aligns children in flex/grid containers on Cross or Block Axis, respectively. Default is stretch.

How to align elements in flex and grids

Syntax

Implementation