Why doesn't vertical align with flex work?

Question

css

I'm trying to make this template: I

've encountered several problems:
1. Vertical alignment with flex does not work on the top inscription in the header, on the 3 lower pink divs and on the orange ones.
2. I can't make the lower pink divs have the same minimum width, and at the same time "rubber". Is it possible?
codepen.io/VasylPylypiv/pen/ZGramM

Answer 1

Do you fundamentally need flex?

Answer 2

Flexbox in 5 minutes