Générateur Flexbox et Grid

Comment utiliser le générateur Flexbox et Grid

1. Choisissez une Mise en page : Flexbox ou Grid, ou partez d’un des Préréglages (Centré, Barre de navigation, Cartes à la ligne, Barre latérale, Grille de cartes adaptative, Holy grail, 12 colonnes).
2. Réglez les propriétés du Conteneur. En Flexbox : flex-direction et flex-wrap. En Grid : grid-template-columns, grid-template-rows, grid-auto-flow, justify-items et grid-template-areas. Les deux modes partagent justify-content, align-items, align-content, row-gap (px) et column-gap (px).
3. Gérez les Éléments avec Ajouter un élément, Supprimer l’élément sélectionné et Réinitialiser l’élément sélectionné. Cliquez sur un élément de l’aperçu (ou atteignez-le avec Tab puis Entrée) pour le sélectionner.
4. Modifiez l’élément sélectionné : order et align-self dans les deux modes, flex-grow, flex-shrink et flex-basis en Flexbox, grid-area, grid-column, grid-row et justify-self en Grid.
5. Copiez le Code CSS et le Code HTML correspondant avec leurs boutons Copier.

Toutes les commandes sont des champs de formulaire classiques : l’outil s’utilise entièrement au clavier. Le CSS ne contient que les propriétés modifiées par rapport à leur valeur par défaut, ce qui le garde court, et les éléments aux réglages identiques partagent une seule règle (.item s’ils sont tous pareils).

Flexbox en bref

Flexbox aligne les éléments sur un seul axe. flex-direction fixe l’axe principal (ligne ou colonne) ; justify-content répartit les éléments le long de cet axe (center, space-between…) et align-items les place sur l’axe secondaire. Avec flex-wrap: wrap, les éléments qui ne tiennent pas passent à la ligne suivante, et align-content espace alors ces lignes.

Chaque élément a trois propriétés de taille, souvent réunies dans le raccourci flex :

• flex-basis : la taille de départ (auto utilise le contenu ou width) ;
• flex-grow : la part d’espace libre que prend l’élément (0 = aucune, 1 = une part égale) ;
• flex-shrink : combien il cède quand la place manque (0 = ne rétrécit jamais).

Le préréglage Barre latérale montre le schéma classique : une colonne latérale en flex-basis: 200px avec flex-shrink: 0, et une zone principale en flex-grow: 1.

CSS Grid en bref

Grid organise les éléments en deux dimensions. grid-template-columns: repeat(3, 1fr) crée trois colonnes égales ; l’unité fr représente une part de l’espace libre. repeat(auto-fill, minmax(120px, 1fr)) crée autant de colonnes d’au moins 120px que possible : une grille de cartes adaptative, sans media query.

Les éléments remplissent les cellules dans l’ordre, sauf si vous les placez : grid-column: span 2 occupe deux colonnes, grid-column: 1 / -1 s’étend sur toute la rangée.

grid-template-areas permet de dessiner la mise en page avec des noms. Écrivez une rangée par ligne, par exemple header header puis nav main, et donnez aux éléments grid-area: header ou grid-area: main. Un point indique une cellule vide. Chaque rangée doit compter le même nombre de cellules et chaque nom doit former un rectangle ; l’outil vous prévient sinon.