The align-items Property of CSS

The align-items Property
The align-items property is used to align the flex it
The center value aligns the flex items in the middle of the container
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
 }
The flex-start value aligns the flex items at the top of the container
.flex-container {
 display: flex;
 height: 200px;
 align-items: flex-start;
 }
The flex-end value aligns the flex items at the bottom of the container
.flex-container {
 display: flex;
 height: 200px;
 align-items: flex-end;
 }
The stretch value stretches the flex items to fill the container (this is default)
.flex-container {
 display: flex;
 height: 200px;
 align-items: stretch;
 }
The baseline value aligns the flex items such as their baselines aligns
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}