Is it possible to create a bottom-up column reverse wrap layout in flexbox?-CodePudding

I have a grid of blocks created in HTML and CSS. The blocks are laid out as a timeline, each column containing 7 blocks representing the days of the week. A very similar concept to GitHub's green commit squares.

Thus far, I have not been able to have the most recent block start at the very bottom right. I have only gotten the columns to reverse-wrap but the most recent block is on the top right.

What I am aiming for:

[6] [3]
[5] [2]
[4] [1]

What I have:

[4] [1]
[5] [2]
[6] [3]

Here is the relevant CSS:

.timeline {
    display: flex;
    flex-flow: column wrap-reverse;
    align-content: space-between;
    width: 100%;
    height: 300px;
}

Is this possible with flexbox? I feel it should be easy but I can't seem to get it right.

CodePudding user response：

Did you try using flex-flow: column-reverse wrap-reverse instead of just column?