Le modèle de boîte flexible, ou CSS Flexbox, est une méthode de mise en page unidimensionnelle conçue pour distribuer l'espace entre les éléments d'un conteneur et aligner ces derniers de manière prévisible. Ce système s'avère particulièrement utile pour concevoir des interfaces adaptatives et fluides, car il permet de modifier la largeur, la hauteur et l'ordre des éléments afin de remplir au mieux l'espace disponible.
Le Générateur de Flexbox CSS permet de configurer visuellement un conteneur flex et ses éléments à l'aide de contrôles interactifs. Les modifications se répercutent instantanément sur une prévisualisation en direct, et le code CSS correspondant est généré automatiquement pour être intégré directement dans vos feuilles de style.
Fonctionnement et traitement des données
L'outil s'exécute entièrement côté client. Votre mise en page est construite dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.
Configuration du conteneur Flex
Le conteneur parent définit le contexte de mise en page pour tous ses enfants directs. Les propriétés suivantes déterminent le comportement global du flux de travail:
- Direction: Définit l'axe principal sur lequel les éléments s'alignent. Les options incluent Ligne (les éléments s'alignent horizontalement), Ligne inversée, Colonne (les éléments s'alignent verticalement) et Colonne inversée. Changer cette direction permute l'axe principal et l'axe transversal, ce qui modifie le comportement des propriétés d'alignement.
- Retour à la ligne: Détermine si les éléments doivent rester sur une seule ligne ou s'ils peuvent s'enrouler sur plusieurs lignes. Les valeurs disponibles sont Aucun (tous les éléments sont contraints sur une seule ligne), Actif (les éléments passent à la ligne suivante s'ils manquent d'espace) et Inversé.
- Justifier le contenu: Aligne les éléments le long de l'axe principal. Les réglages possibles sont Début, Fin, Centre, Espace entre, Espace autour et Espace uniforme.
- Aligner les éléments: Gère l'alignement des éléments sur l'axe transversal pour la ligne en cours. Les options sont Début, Fin, Centre, Étirer et Ligne de base.
- Aligner les lignes: Cette propriété n'intervient que lorsque le retour à la ligne est activé et que plusieurs lignes d'éléments sont créées. Elle répartit l'espace entre ces lignes selon les valeurs Début, Fin, Centre, Étirer, Espace entre, Espace autour et Espace uniforme.
- Espacement: Définit une valeur numérique pour le
gap, qui applique un espace uniforme entre les éléments et entre les lignes, sans nécessiter de marges externes manuelles.
Personnalisation des éléments individuels
Chaque élément enfant du conteneur peut être configuré de manière indépendante pour ajuster sa taille et son positionnement par rapport aux autres:
- Ordre: Reçoit une valeur numérique qui modifie l'ordre d'affichage visuel de l'élément sans altérer la structure du code HTML.
- Grandir: Une valeur numérique (
flex-grow) qui détermine la capacité de l'élément à s'étirer pour occuper l'espace libre restant dans le conteneur. - Rétrécir: Une valeur numérique (
flex-shrink) qui définit la capacité de l'élément à se contracter lorsque l'espace disponible est insuffisant. - Base: Définit la taille initiale de l'élément avant la répartition de l'espace restant. Elle accepte une valeur numérique ou la valeur Base automatique (
auto). - Alignement propre: Permet à un élément spécifique de remplacer la règle générale définie par Aligner les éléments du conteneur. Les options sont Auto, Début, Fin, Centre, Étirer et Ligne de base.
Génération et récupération du code CSS
L'interface affiche en temps réel le code CSS généré pour le conteneur et ses éléments. Une règle d'optimisation stricte est appliquée: seuls les éléments dont vous modifiez les propriétés par défaut reçoivent leur propre règle dans le CSS généré. Les éléments non modifiés héritent simplement du comportement standard du conteneur.
Pour ajouter un nouvel élément à la prévisualisation, il suffit de cliquer sur le bouton Ajouter un élément (qui génère par exemple un nouvel élément nommé "Élément 5"). Pour copier le code produit, cliquez sur le bouton Copier le CSS; l'état du bouton passe alors temporairement à "Copié" pour confirmer l'enregistrement dans votre presse-papiers.
Modèles de mise en page courants
Le générateur permet de concevoir rapidement plusieurs structures classiques du web:
- Centrer: Aligne parfaitement un élément au centre du conteneur, horizontalement et verticalement.
- Navbar: Crée une barre de navigation où les éléments de menu sont répartis de manière homogène, par exemple avec un logo à gauche et des liens à droite.
- Pile: Organise les éléments verticalement sous forme de colonne à espacement régulier.
- Cartes: Aligne plusieurs blocs de contenu (cartes) qui passent automatiquement à la ligne suivante lorsque la largeur de l'écran diminue.
- Barre latérale: Crée une disposition à deux colonnes asymétriques, où le contenu principal s'étire pour occuper l'espace restant à côté d'un menu fixe.
FAQ
Quelle est la différence entre justify-content et align-items?
justify-content répartit les éléments le long de l’axe principal — la direction dans laquelle la ligne ou la colonne s’écoule —, tandis qu’align-items les place sur l’autre axe. Passez la direction de ligne à colonne et les deux axes s’inversent: justify-content agit alors de haut en bas et align-items de gauche à droite.
Comment fonctionnent les contrôles de chaque élément?
Choisissez un élément par son numéro, puis réglez combien il grandit pour occuper l’espace libre, combien il rétrécit quand la place manque, sa taille de départ (basis) et son propre alignement sur l’axe transversal. L’ordre avance ou recule un élément à l’écran sans toucher au HTML. Seuls les éléments que vous modifiez reçoivent leur propre règle dans le CSS.
Quand le retour à la ligne et align-content comptent-ils?
Sans retour à la ligne, tous les éléments tiennent sur une seule ligne et peuvent être comprimés. Activez-le et ceux qui ne rentrent plus passent à la ligne suivante: c’est là qu’align-content entre en jeu et répartit l’espace entre les lignes comme un ensemble. Le gap fixe l’écart entre les éléments, et entre les lignes, sans marges.