Aide-mémoire Flexbox et Grid (interactif) avec Tailwind | We.Inc
Toutes les propriétés flexbox et CSS grid sur un conteneur en direct que vous pouvez modifier, un générateur grid-template-areas, un guide pour choisir entre flex et grid, et les classes Tailwind.
Aide-mémoire Flexbox et Grid
Flexbox dispose les éléments dans une seule direction, une ligne ou une colonne, et convient le mieux aux barres d'outils, aux barres de navigation et au centrage. Grid place les éléments en lignes et en colonnes à la fois et convient aux mises en page et aux galeries de cartes. Définissez display: flex ou display: grid sur le parent, puis utilisez les propriétés ci-dessous ; chacune met à jour un conteneur en direct sur cette page.
Flexbox ou grid ?
Mise en page
Choix
Centrer un élément dans une boîte
Les deux : grid avec place-items: center est le plus court
Une rangée de boutons ou de liens de navigation
Flexbox
Des éléments de largeur inconnue qui doivent passer à la ligne
Flexbox avec flex-wrap
Des cartes en colonnes égales
Grid avec repeat(auto-fill, minmax())
En-tête, barre latérale, contenu principal, pied de page
Grid avec grid-template-areas
Aligner des éléments sur les lignes et les colonnes
Grid
Deux conteneurs en direct, un flex et un grid, avec un réglage pour chaque propriété du conteneur et pour un élément choisi. Chaque modification affiche le CSS et la classe Tailwind. En dessous, dessinez une mise en page dans le générateur grid-template-areas et copiez le résultat. Les tableaux de référence s'impriment proprement.
Utilisez les réglages flexbox pour modifier le conteneur, puis choisissez un élément pour essayer grow, shrink, basis, order et align-self.
Faites de même dans le bac à sable grid, y compris les spans qui étendent un élément sur plusieurs colonnes ou lignes.
Dans le générateur de zones, choisissez un nom de zone et cliquez sur les cellules pour les peindre. Le CSS du conteneur et de chaque zone s'affiche en dessous.
Appuyez sur Imprimer pour obtenir les tableaux des propriétés sur papier ou en PDF.
Utilisez gap pour l'espacement entre les éléments plutôt que des marges. Il n'ajoute de l'espace qu'entre les éléments, jamais sur les bords extérieurs.
flex: 1 sur chaque élément crée des colonnes de même largeur qui réagissent encore à leur contenu ; grid avec des colonnes 1fr ignore la largeur du contenu.
Réservez order et le placement grid aux ajustements visuels. Les utilisateurs du clavier et des lecteurs d'écran suivent l'ordre du code source, donc l'ordre du HTML doit rester logique.
minmax(0, 1fr) au lieu de 1fr empêche un mot long ou une image large d'élargir une colonne de la grille au-delà de sa part.
Questions fréquentes
Quelle est la différence entre justify-content et align-items ?
justify-content agit sur l'axe principal, qui dans une ligne flex va de gauche à droite. align-items agit sur l'axe perpendiculaire, de haut en bas dans une ligne. Passez flex-direction à column et les deux échangent leurs directions physiques, ce qui explique pourquoi le centrage semble parfois utiliser la mauvaise propriété.
Pourquoi justify-content n'a-t-il aucun effet ?
Il n'agit que s'il reste de l'espace libre sur l'axe principal. Si un élément a flex-grow: 1 ou si les éléments remplissent la ligne, il ne reste rien à répartir. Dans grid, justify-content déplace l'ensemble des pistes, tandis que justify-items aligne les éléments dans leurs propres cellules.
Comment fonctionne grid-template-areas ?
Vous dessinez la mise en page sous forme de chaînes, une par ligne, avec un nom pour chaque cellule, comme "header header" "side main". Chaque enfant réclame ensuite un nom avec grid-area: header. Les zones doivent former des rectangles, et un point marque une cellule vide.
Peut-on utiliser flexbox à l'intérieur de grid ?
Oui, et c'est courant. Grid place les grandes régions ou les cartes, et flexbox organise le contenu à l'intérieur de chacune, comme une icône à côté d'un libellé ou un pied de carte calé en bas.
gap est-il pris en charge dans flexbox ?
Oui. Tous les grands navigateurs actuels prennent en charge gap dans les conteneurs flex comme dans grid, donc l'ancienne astuce des marges négatives sur le conteneur n'est plus nécessaire.
Les deux axes
Chaque conteneur flex a un axe principal défini par flex-direction et un axe secondaire perpendiculaire. Les propriétés qui commencent par justify agissent sur l'axe principal et celles qui commencent par align sur l'axe secondaire. Une fois ce principe compris, la plupart des casse-têtes flexbox se résument à savoir de quel axe on parle.
Grid a au contraire une paire d'axes fixe : inline (en général horizontal) et block (en général vertical). justify-* aligne le long de l'axe inline et align-* le long de l'axe block, pour la grille entière comme pour les éléments dans leurs cellules.
Comment les éléments flex déterminent leur taille
Chaque élément part de son flex-basis, ou de la taille de son contenu quand basis vaut auto. S'il reste de la place sur la ligne, l'espace libre est partagé proportionnellement à flex-grow. Si la ligne est trop pleine, les éléments rétrécissent proportionnellement à flex-shrink multiplié par leur basis.
Le raccourci flex: 1 signifie grow 1, shrink 1, basis 0%, donc chaque élément finit avec la même largeur quel que soit son contenu. flex: auto garde la taille du contenu comme point de départ, donc les libellés plus longs obtiennent des boîtes plus larges.
Des grilles responsives sans media queries
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) place autant de colonnes d'au moins 220 pixels que le conteneur le permet et les étire pour remplir la ligne. Les cartes passent d'une colonne sur un téléphone à quatre ou cinq sur un grand écran, sans aucun breakpoint.
auto-fit se comporte de la même façon tant qu'il n'y a pas moins d'éléments que de colonnes : auto-fill garde les colonnes vides, tandis qu'auto-fit les réduit pour que les éléments existants s'étirent sur toute la ligne.