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