How Can I Vertically Align Flex Items?

Align Flex Items Vertically

Flexbox offers a convenient way to arrange elements within a container. However, sometimes you may encounter issues where items are rendered side by side instead of in the desired vertical order. This can occur when using display: flex.

To prevent flex items from rendering side by side, simply add the following style to the parent element:

flex-direction: column;

This directive instructs the flexbox to display its children in columns rather than rows.

Example:

In the provided code snippet:

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

Initially, the "square" and "some text" elements will be placed side by side. To fix this, add the following CSS:

.inner {
  flex-direction: column;
}

This will ensure that the "square" is positioned above the "some text" element, achieving the desired vertical layout.

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