[Résolu] Flexbox : les éléments s'affichent côte à côte

Bonjour,

Je poste ce message car je rencontre un problème de mise en page.

Je souhaite utiliser flexbox afin de centrer verticalement le contenu de deux div.

Lorsque j'affecte flexbox aux deux div, le contenu se centre verticalement mais il s'affiche côte à côte, comme s'il flottait. Les titres et les paragraphes ne s'affichent plus les uns en dessous des autres.

Sauriez-vous me dire d'où vient le problème ?

Voici le code :
https://codepen.io/anon/pen/YvzyXr

Merci
Modifié par MickFR (29 May 2018 - 11:27)

Salut !

flex-direction: column;

Un petit lien utile : https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html

Bonne journée !

Ah oui et du coup le centrage vertical c'est :

justify-content: center;

_laurent a écrit :

Un petit lien utile : https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html

Alors ça, ça c'est vraiment un truc à la fois utile et intelligent à garder précieusement dans ses tablettes !

Je crois même me souvenir que ce site que personne ne connaît ici-bas a fait preuve de la même intelligence pour produire le même document à propos du layout Grid

Merci de votre aide
Modifié par MickFR (29 May 2018 - 12:29)

Bonjour,

Je me permets de reposter un message car je ne comprends pas pourquoi mes éléments ne se centrent pas verticalement dans une section (height: 100vh;).

Sauriez-vous me donner une piste pour résoudre ce problème ?

https://codepen.io/anon/pen/MXzXKg

Merci
Modifié par MickFR (28 Jun 2018 - 16:55)

Hello, ta section doit aussi être en display flex, si non elle ne prendra pas la hauteur disponible …

Aussi, maintenant que tu connais Flexbox, tu peux supprimer ton float inutile
Modifié par Yordi (28 Jun 2018 - 16:59)