align-items[row]

align-items [row]

So justify-content controls how items are laid out on the main axis. What about their layout in the cross axis? Don't worry, that's where align-items come into play. Remember the cross axis is always perpendicular to the main axis. So if the main axis is sitting horizontally, where flex-direction is row. Then , the cross axis is sitting vertically. 🤓

.parent {
  align-items: stretch /* default */
            or flex-start
            or flex-end
            or center
            or baseline
}

The align-items property is used to align the flex items.

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