How to properly type this with Flexbox?

Question

Layout

Answer 1

Easiest :
Parent the following styles:

display:flex;
flex-wrap: wrap;
justify-content: space-between;

Child:

width: 24%;
height: 200px;

The fifth block is:

.parent .child:nth-of-type(5) {
width: 48%;
}

You can play around with width / height, indents

Answer 2

Yes, so insert the picture and do not worry)

Answer 3

Answer 4

Everything has already been said in flex. Look also towards the grid, it is already possible and not at all scary.

Answer 5

d-flex
flex-row
justify-content- between
for the second also, just increase the width of the first element, in total three blocks