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