How Can I Vertically Align Flex Items Instead of Horizontally?

Keeping Flex Items Vertically Aligned

When using flexbox to center elements, it's sometimes frustrating when the items stack horizontally instead of vertically. This issue arises when the flex items have a natural inline flow, such as text or images.

Problem:

Consider the following code snippet:

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

The intention is to center both the orange square and the text within the .inner container. However, the output will show the square and text side-by-side, with the text cut off halfway.

Solution:

To correct this behavior, we need to alter the flex direction of the .inner container. By default, flexbox displays its children horizontally. To make them stack vertically, we set the flex-direction property to column.

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

This updated code snippet will force the flex items to be vertically aligned, resolving the side-by-side stacking issue.

Updated Output:

The orange square will now appear above the text, as originally intended. This is a useful technique when you want to ensure that certain elements remain aligned in a specific way within a flex container.

The above is the detailed content of How Can I Vertically Align Flex Items Instead of Horizontally?. For more information, please follow other related articles on the PHP Chinese website!