Salut,
Je crois que quand on travail avec les flex-box, il faut souvent rajouter du HTML pour pouvoir faire ce qu'on veut faire.
Par exemple là tu as :
- un container (en gris)
- 3 éléments (vert, bleu, jaune)
Il faudrait rajouter des "sous-container" :
- un container (en gris)
- un sous-container par "ligne"
- 3 éléments (vert, bleu, jaune) --- contenus dans un sous-container
- Un 4ème élément --- contenu dans un sous-container
chaque sous-container formerait une sorte de 'block' dans le container gris,
chaque sous-container prend toute la largeur du container gris, et s'emplilent les uns sous les autres.
Le container (gris), est en flex-direction: column,
les sous-container sont en flex-direction: row et en justyfy-content: space-around.
Tu vas avoir des problèmes d'alignement sur l'axe vertical (si les contenus des "éléments" ne font pas exactement la même largeur).
Pour résoudre ça, tu peux définir une largeur en pixels pour les "éléments", et leur mettre un text-align: center.