Flexbox columns, wrap order bottom to top

Question

Trying to build a flexbox where the ordering of the elements not only start from the bottom but the last elements keeps getting pushed.

The ordering would work similar to this:

[3][6]

[2][5]

[1][4]

At present, new elements will appear at the bottom of the column.

Can this even be done with flexbox?

Answer 1

This can be done indeed be done with flexbox. We use the flex-direction property, to reverse the order with flex-direction: column-reverse and we wrap the boxes with flex-wrap: wrap; - This can also be done by combining the two in flex-flow - I've out-commented that in the pen below. What you need to take note of, is that by using columnising your boxes, you will need to add a specific height to the container. If you don't they will just keep going downwards, and not wrapping.

Here's a pen illustrating your exact need.

And the code used:

HTML - Notice the order.

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

CSS

.container {
    display: flex;
    flex-direction: column-reverse; /* Where ordering reverses */
    flex-wrap: wrap; /* Wrapping boxes */
    /* flex-flow: column-reverse wrap; */
    height: 300px;
    width: 100px;
}
.box { /* All properties here are for illustrative purposes */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    width: 50px;
    height: 50px;

    background-color: red;
}

Remember your vendor-prefixes.