'Vertical alignment for flexbox CSS

I am trying to achieve the vertical alignment of the below code. However, when I tried to add flex-direction: column, and change the margin-left to margin-top, the spacing between "three" and "four" does not work at all. Can anyone enlighten me?

Before i change to vertical flex column direction:

<div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div class="push">Four</div>
        <div>Five</div>
      </div>

.box {
  display: flex;
}
.push {
    margin-left: auto;
}

Before i change to vertical flex column direction

After I add flex-direction: column, and change the margin-left to margin-top:

.box {
    display: flex;
    flex-direction: column;
  }
.push {
    margin-top: auto;
}

enter image description here

htmlcssflexbox


Solution 1:[1]

You are not getting the spacing because the height is already max. If you want to use margin-auto you must have more space the the boxes are taking. In the below image you can see the green box is the wrapper and it has the max height. Once you change your height more the the boxes are taking it will work.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Krum

Related Questions