Aide-mémoire CSS Flexbox
Consultez la référence des propriétés CSS Flexbox pour conteneurs et éléments, avec leurs valeurs par défaut et des exemples de mise en page.
Exécuter l’outil
Cet aide-mémoire CSS Flexbox rassemble les propriétés essentielles du modèle de boîte flexible pour structurer vos interfaces web. La documentation synthétise les règles applicables au conteneur parent, telles que la direction de l'axe principal, le passage à la ligne, la distribution de l'espace, l'alignement transversal et la gestion des espacements via la propriété gap avec des unités comme 16px ou 1rem.
Le guide détaille également les propriétés des éléments enfants, notamment les facteurs de grossissement ou de réduction, la base initiale, la syntaxe raccourcie flex, l'alignement individuel et l'ordre d'affichage. Il rappelle les valeurs initiales standard du navigateur, comme l'orientation en ligne sans retour à la ligne ou l'étirement par défaut des éléments.
Des modèles d'intégration prêts à l'emploi illustrent des cas d'usage concrets : centrage parfait d'un bloc, barre de navigation, grille de cartes réactive, structure avec barre latérale, colonnes égales et pied de page ancré en bas d'écran.
Mode d’emploi
- Lancez l'outil pour afficher la fiche de référence complète.
- Parcourez la section du conteneur pour configurer l'axe principal, la répartition de l'espace et les espacements.
- Consultez les propriétés des éléments pour ajuster la flexibilité individuelle, l'ordre et l'alignement spécifique.
- Sélectionnez un motif de mise en page prêt à l'emploi, comme une barre de navigation ou un centrage, pour récupérer la structure CSS correspondante.
Exemples
- Centrage absolu : application de display: flex sur le conteneur avec justify-content: center et align-items: center pour positionner un élément au centre horizontal et vertical.
- Grille de cartes adaptative : définition de flex-wrap: wrap sur le conteneur avec un espacement gap de 1rem et des éléments enfants dotés d'une base initiale flexible.
- Barre de navigation : conteneur configuré avec justify-content: space-between et align-items: center pour séparer l'élément de marque des liens de navigation.
FAQ
Quelles sont les valeurs par défaut du conteneur Flexbox ?
Par défaut, un conteneur organise ses éléments sur une seule ligne horizontale (direction row sans passage à la ligne), aligne les éléments au début de l'axe principal et les étire sur l'axe transversal.
Quelles sont les valeurs par défaut appliquées aux éléments enfants ?
Chaque élément enfant possède initialement un facteur de croissance à 0, un facteur de rétrécissement à 1, un alignement automatique et un ordre d'affichage fixé à 0.
Comment fonctionnent les espacements avec la propriété gap ?
La propriété gap s'applique au conteneur parent et définit l'espace entre les éléments adjacents, en utilisant des unités de longueur CSS comme 16px ou 1rem sans nécessiter de marges externes sur les enfants.
L'outil fournit-il un rendu visuel interactif ?
Cette fiche de référence documente les propriétés CSS et fournit des fragments de code prêts à l'emploi, mais ne génère pas de rendu visuel interactif dans le navigateur ni de calcul d'affichage dynamique.