Qu'est-ce que CSS Flexbox ?
CSS Flexbox (Flexible Box Layout) est un modèle de mise en page unidimensionnel pour distribuer l'espace et aligner des éléments dans une ligne ou une colonne. Le conteneur flex est défini avec display: flex, et ses enfants directs deviennent des éléments flex. Propriétés clés du conteneur : flex-direction (ligne ou colonne), flex-wrap (une seule vs. plusieurs lignes), justify-content (alignement sur l'axe principal), align-items (alignement sur l'axe transversal par ligne) et align-content (alignement sur l'axe transversal de plusieurs lignes). Propriétés clés des éléments : flex-grow (combien un élément grandit), flex-shrink (combien il rétrécit), flex-basis (taille initiale) et align-self (remplace l'align-items du conteneur pour un élément spécifique). Flexbox est idéal pour les barres de navigation, les rangées de cartes, les mises en page centrées et tout arrangement unidimensionnel.
Comment utiliser le Générateur CSS Flexbox
-
Ajustez les propriétés du conteneur (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) à l'aide des menus déroulants et du champ de saisie.
-
Cliquez sur n'importe quel élément dans l'aperçu pour le sélectionner (devient orange).
-
Définissez flex-grow, flex-shrink, flex-basis et align-self de l'élément sélectionné dans le panneau d'élément.
-
Cliquez sur '+ Ajouter un élément' pour ajouter des éléments ; cliquez sur 'Supprimer' pour effacer l'élément sélectionné.
-
Basculez entre les onglets CSS et HTML pour voir le code généré, puis cliquez sur Copier.
-
Cliquez sur 'Tout réinitialiser' pour repartir de zéro avec la mise en page par défaut à 3 éléments.