Générateur Flexbox
Réglez les propriétés et lisez, en langage clair, ce qu'elles font vraiment.
- Fonctionne dans votre navigateur — votre texte n'est jamais envoyé nulle part
- Sans inscription, sans quota, gratuit et utilisable aussi souvent que vous le souhaitez
Comment ça marche
Flexbox n'est pas compliqué, mais une chose y piège presque tout le monde§: justify-content et align-items ne signifient pas horizontal et vertical. Ils signifient le long de la direction et en travers, et la direction, c'est vous qui la définissez.
Le piège, dit sans détour
Avec flex-direction: row, justify-content agit horizontalement et align-items verticalement. Passez à column et ils s'inversent complètement. Chaque heure perdue sur flexbox tient, pour l'essentiel, à cela. L'explication en dessous se met à jour quand vous changez la direction, pour que la relation soit visible plutôt que mémorisée.
Axe principal et axe transversal
L'axe principal est celui le long duquel les éléments s'enchaînent, défini par flex-direction. L'axe transversal lui est perpendiculaire. justify-content répartit l'espace le long de l'axe principal§; align-items positionne les éléments sur l'axe transversal. Une fois ces deux noms retenus, le reste en découle.
gap, et pourquoi il a remplacé les marges
gap place de l'espace entre les éléments sans en ajouter à l'extérieur du premier et du dernier, ce que les marges font mal et que l'on corrigeait autrefois avec des bidouilles :last-child. Il est pris en charge par tous les navigateurs actuels et il n'y a plus de raison de l'éviter.
nowrap veut dire rétrécir, pas déborder
La valeur par défaut est nowrap, et les éléments rétrécissent en dessous de leur taille naturelle pour tenir plutôt que de passer à une nouvelle ligne. C'est pourquoi le texte s'écrase parfois de façon inattendue dans une ligne flex. Définir wrap permet aux éléments de descendre à la place§; min-width: 0 sur un enfant l'empêche de rétrécir en dessous de son contenu.
Centrer dans les deux sens
justify-content: center avec align-items: center centre un élément dans les deux directions quelle que soit la valeur de flex-direction, ce qui est la seule combinaison à retenir par cœur.
Générateur Flexbox : questions
Pourquoi align-items déplace-t-il les éléments horizontalement§?
Parce que flex-direction vaut column. Les deux propriétés suivent la direction, pas l'écran.
Quelle est la différence entre l'axe principal et l'axe transversal§?
L'axe principal est la direction dans laquelle les éléments s'enchaînent, définie par flex-direction. L'axe transversal lui est perpendiculaire.
Comment centrer quelque chose dans les deux sens§?
justify-content: center avec align-items: center.
Pourquoi mon texte est-il écrasé§?
La valeur par défaut nowrap réduit les éléments pour qu'ils tiennent. Définissez flex-wrap: wrap, ou min-width: 0 sur l'enfant.
Puis-je utiliser gap avec flexbox§?
Oui, dans tous les navigateurs actuels. C'est mieux que les marges, car cela n'ajoute pas d'espace aux extrémités.