Vertically center and left-align a column of flex items

Question

justify-content aligns flex items along the main axis.

align-items aligns flex items along the cross axis, which is always perpendicular to the main axis.

Depending on the flex-direction, the main axis may be horizontal or vertical.

Since flex-direction:column means the main axis is vertical, you need to use justify-content not align-items to center the flex items.

Here’s an example:

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  background-color: lightpink;
}

<div id="container">
  <div class="box">div 1</div>
  <div class="box">div 2</div>
  <div class="box">div 3</div>
  <div class="box">div 4</div>
  <div class="box">div 5</div>
</div>

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Leave a Comment Cancel reply