How do I justify content in a column when using flexbox?

hoodedvul

In article: How do I use css flexbox to justify content in a container?

we showed the CSS justify-content property with flex-direction: row If we change the flex-direction to column the content does not appear as we expect.

The demo code is below.

HTML.

...
 <div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
</div>
...

CSS.

...
 .container {
        margin-top: 50px;
        padding: 20px 0;
        background-color: brown;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
      }

      .item {
        padding: 30px;
        background-color: burlywood;
        text-align: center;
        font-size: 30px;
      }
...

The content adjusts to the size of the container when we changed it to column.

To resolve this add a height to the CSS container and width to the CSS item. The edited CSS below:

...
     .container {
        height: 700px;
        margin-top: 50px;
        padding: 20px 0;
        background-color: brown;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
      }

      .item {
        width: 50px;
        padding: 30px;
        /* margin: 10px; */
        background-color: burlywood;
        text-align: center;
        font-size: 30px;
      }
...

We now have flex-direction: column displaying correctly, but if we change the flex-direction back to row. The result is not what we would expect.

This is because the default value for the CSS property align-items is stretch. If we change that to align-items: flex-start; the result is:

The CSS align-items has other values center, flex-end, and baseline.