1.1Conteneurs & mise en page (flexbox)
L'essentiel en 30 secondes
- Direction : les éléments s'alignent en rangée (horizontal) ou en colonne (vertical).
- Alignement : justify (axe principal) et align (axe secondaire) placent les éléments (début, centre, fin, espacé).
- Gap = l'écart entre éléments ; wrap = les éléments passent à la ligne quand la place manque.
Mini-cas filé — Nadia aligne la bannière
Nadia veut une bannière : à gauche le logo et le nom « Menuiserie Benali », à droite un bouton « Demander un devis », le tout centré verticalement. Sans Flexbox, les éléments s'empilent n'importe comment. Elle découvre que direction + alignement + gap suffisent à tout caler, sans une ligne de CSS.
Suite du niveau 0 — Nadia passe de la théorie des boîtes à la pratique.
1. Direction et alignement
Le conteneur Flexbox règle d'abord sa direction : rangée (les éléments côte à côte, horizontalement) ou colonne (empilés verticalement). Puis l'alignement : justify gère la position sur l'axe principal (début, centre, fin, espacé), align sur l'axe secondaire. Pour la bannière de Nadia : direction rangée, justify « espacé » (logo à gauche, bouton à droite), align « centre » (alignés verticalement).
Ces réglages se font visuellement dans l'onglet Disposition du conteneur — aucun code. On voit le résultat bouger en direct dans le canvas.
2. Gap, wrap et imbrication
Le gap fixe l'écart régulier entre les éléments (plus propre que des marges individuelles). Le wrap autorise les éléments à passer à la ligne quand la largeur manque — essentiel pour que trois cartes deviennent une colonne sur mobile.
Enfin, l'imbrication : un conteneur « rangée » peut contenir des conteneurs « colonne ». Nadia imbrique pour obtenir, dans la bannière, un bloc texte (nom + slogan empilés) à côté du bouton.
🔎 Exemple concret — Caler la bannière (cas Nadia)
Conteneur bannière : direction = rangée
justify = espacé (logo à gauche, bouton à droite)
align = centre (alignés verticalement)
gap = 20px ; wrap = activé (pour le mobile)
→ Résultat : bannière nette, prête à passer en colonne sur petit écran.Résultat : un alignement pro en 4 réglages.
Leçon : penser direction → alignement → gap → wrap.
Vocabulaire de la section
- Flexbox
- Le système moderne qui gère la disposition des éléments à l'intérieur d'un conteneur.
Exemple simple : Nadia aligne logo et bouton d'un bord à l'autre via Flexbox.
Ce que ce n'est pas : positionner les éléments au pixel avec des marges bricolées.
Réflexe : pour aligner dans une boîte, régler le Flexbox du conteneur.
- Direction
- Sens d'alignement des éléments : en rangée (horizontal) ou en colonne (vertical).
Exemple simple : bannière en rangée ; liste de services en colonne.
Ce que ce n'est pas : croire qu'on ne peut aligner qu'horizontalement.
Réflexe : côte à côte = rangée ; empilé = colonne.
- Alignement (justify / align)
- justify place sur l'axe principal, align sur l'axe secondaire (début, centre, fin, espacé).
Exemple simple : justify « espacé » éloigne logo et bouton ; align « centre » les aligne verticalement.
Ce que ce n'est pas : ajouter des marges au hasard pour « pousser » un élément.
Réflexe : justify = le long de la direction ; align = en travers.
- Gap / Wrap
- Gap : l'écart régulier entre éléments. Wrap : autorise le passage à la ligne quand la place manque.
Exemple simple : gap de 20px entre 3 cartes ; wrap pour qu'elles s'empilent sur mobile.
Ce que ce n'est pas : mettre une marge différente sur chaque élément au lieu d'un gap.
Réflexe : écart régulier → gap ; adaptation mobile → wrap.
- Imbrication
- Un conteneur dans un conteneur (ex. une rangée contenant des colonnes).
Exemple simple : dans la bannière, un conteneur « texte » (nom + slogan) à côté du bouton.
Ce que ce n'est pas : empiler des conteneurs sans besoin réel.
Réflexe : imbriquer quand un groupe d'éléments doit se comporter ensemble.
En pratique — Construire une bannière en Flexbox
- Créez un conteneur, réglez sa direction sur « rangée ».
- Placez un logo/texte à gauche et un bouton à droite ; réglez justify sur « espacé ».
- Réglez align sur « centre » pour aligner verticalement.
- Ajoutez un gap et activez wrap pour anticiper le mobile.
Script prêt à dire — justifier un choix de mise en page (20 s)
« Votre bannière met le nom à gauche et le bouton de devis à droite, bien visibles et alignés. Sur mobile, les éléments passeront automatiquement les uns sous les autres pour rester lisibles. Tout est réglé proprement, sans bricolage. »
Relier chaque réglage à un bénéfice concret (lisibilité, mobile).
Modèle copier-coller — réglages d'un conteneur
CONTENEUR : _______________
DIRECTION : rangée / colonne
JUSTIFY (axe principal) : début / centre / fin / espacé
ALIGN (axe secondaire) : début / centre / fin / étiré
GAP : ____ px
WRAP : activé / désactivé
IMBRICATION ? (sous-conteneurs) : _______________Bannière
Rangée, justify espacé, align centre : logo d'un côté, action de l'autre.
Liste de services
Colonne, gap régulier : chaque service empilé, aéré.
Grille de cartes
Rangée + wrap : 3 cartes en ligne qui s'empilent sur mobile.
Centrer un bloc
justify centre + align centre : un bloc parfaitement centré dans son conteneur.
✓ Bonnes pratiques
- Préférer le gap aux marges individuelles.
- Activer wrap pour anticiper le mobile.
- Imbriquer seulement quand un groupe doit bouger ensemble.
✗ Pièges fréquents
- Pousser des éléments avec des marges au lieu de justify/align.
- Oublier wrap et casser l'affichage mobile.
- Sur-imbriquer des conteneurs.
Points clés à retenir
- Direction : rangée ou colonne.
- justify (axe principal) et align (axe secondaire).
- gap = écart régulier ; wrap = retour à la ligne.
- Tout se règle visuellement, sans CSS.
Défi 48h — appliquez demain
Construisez une bannière (logo + bouton) alignée avec direction rangée, justify « espacé », align « centre » et un gap. Activez wrap et vérifiez le rendu mobile dans l'aperçu. 20 minutes.
- Je règle direction, justify et align d'un conteneur.
- J'utilise gap et wrap à bon escient.
- J'imbrique quand la mise en page l'exige.
Questions fréquentes
Dois-je connaître le CSS pour utiliser Flexbox dans Elementor ?
Non : tout se règle visuellement (direction, justify/align, gap, wrap) dans l'onglet Disposition. Connaître les termes aide, mais aucun code n'est requis.
Quelle différence entre justify et align ?
justify agit sur l'axe principal (le sens de la direction), align sur l'axe secondaire (perpendiculaire). En rangée : justify = horizontal, align = vertical.
À quoi sert wrap ?
À autoriser les éléments à passer à la ligne quand la largeur manque — indispensable pour qu'une rangée de cartes s'empile proprement sur mobile.
Nadia veut le logo à gauche et le bouton « devis » à droite, alignés verticalement. Quels réglages du conteneur ?