How to Stop Flex Items from Displaying Side-by-Side?

Preventing Flex Items from Rendering Side by Side

Problem:

When using flexbox to center elements within a block, it's common to encounter an issue where items appear side by side instead of vertically below one another. This can be undesirable in certain situations.

Solution:

To prevent flex items from rendering side by side, implement the following CSS style:

.inner {
  flex-direction: column;
}

Explanation:

This style property specifies the direction in which flex items are arranged within the container element. By setting flex-direction to column, you instruct the flexbox to display its children in rows instead of columns. This aligns the items vertically below one another, as desired.

Updated Example:

The following updated code snippet demonstrates how this solution works:

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

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

By utilizing flex-direction: column, the orange square and text are now properly stacked vertically within the container element, as intended.

The above is the detailed content of How to Stop Flex Items from Displaying Side-by-Side?. For more information, please follow other related articles on the PHP Chinese website!