[Flexbox] - Aligner une div au dessus de trois autres div

Laznet
Les bases HTML/CSS

Bonjour,

Dans le but de donner un titre a mes trois box (Box 1, Box2, Box3, voir image en dessous) j'aimerais faire en sorte qu'une div soit au dessus de ces trois box.
J'ai tenter d'utiliser align-self. Mais mes boxes changent de position.
Auriez vous une idée pour avoir une div en haut avec possibilité de centrer le texte a l'intérieur.
Et que les box en dessous gardent leurs positions.

Merci d'avance pour vos réponses.

3 réponses

SLK
Réponse acceptée

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.

Benjamin Derepas

as tu essayer de jouer avec les margins ? pae defaut flexbox fixe automatiquement les marges.

Laznet
Auteur

Merci a vous deux :D