How to position flex items inside a container?

Question

Flexbox

Firework!
People, tell me, in the "black" flex container there are "colored" flex elements.

I want to scatter them approximately like in the picture, but it turns out only either in a row or in a column. This is real?

Answer 1

Unfortunately, it will not work on pure flexes, your grid is two-dimensional, and flexes are a one-dimensional technology.
You will need to add a wrapper for the blocks on the right (I sketched an example ). The markup is the same as in the answer above, but the styles are implemented differently.
If a solution without a wrapper is fundamentally necessary, then do it either with grids, or alternatively, using the bootstrap grid v3.3.7

Answer 2

Yes really. For black block:

display:flex;
flex-direction:column;

All blocks that are under orange wrap in divs and set

display:flex;
flex-direction:row; /*Можно и не писать это, написал для поняности*/

And all the blocks on the right (yellow, blue purple) are also wrapped in divs and set

display:flex;
flex-direction:column;

Well, according to the alignment there, you yourself will select the properties. But in general, the layout is like this.