Aire de jeux Flexbox
Apprenez visuellement flexbox : retournez les propriétés, regardez la mise en page répondre.
Comment utiliser Aire de jeux Flexbox
- Définissez le nombre d'éléments pour qu'il corresponde à peu près à votre mise en page réelle.
- Inversez les listes déroulantes – direction, justification du contenu, aligner les éléments, retour à la ligne, espacement – et observez la réponse.
- Apprenez l'inversion de l'axe : changez de direction et testez à nouveau justifier ou aligner – l'analyse principale de la flexbox.
- Copiez la combinaison gagnante dans le conteneur de votre feuille de style. règle.
Qu'est-ce que Aire de jeux Flexbox ?
Un terrain de jeu flexbox est un bac à sable interactif pour le système de mise en page principal de CSS : des listes déroulantes pour flex-direction, justify-content, align-items, flex-wrap et gap, un conteneur dynamique d'éléments qui se réorganise dès que vous en modifiez un - la boucle de cause à effet qui fait enfin de flexbox cliquez.
L'obstacle d'apprentissage notoire de Flexbox est son système d'axes : justify-content fonctionne le long de l'axe principal et align-items le long de l'axe transversal - mais c'est lui qui s'inverse lorsque la direction change de ligne en colonne. La lecture de cette phrase l’enseigne rarement ; retournez la liste déroulante et regardez les choses.
À propos de Aire de jeux Flexbox
Définissez les propriétés du conteneur et regardez les éléments numérotés obéir : direction de la ligne ou de la colonne, justification depuis le début flexible jusqu'à l'espacement uniforme, alignement, habillage, taille de l'espace et nombre d'éléments - chaque combinaison est visible immédiatement.
Les expériences les plus instructives : définissez la direction de la ligne, parcourez les six valeurs avec justification, puis changez de direction en colonne et parcourez-les à nouveau - le retournement de l'axe devient intuitif en une minute ; comparer l'espace entre, l'espace autour et l'espace uniformément côte à côte (la différence d'espacement des bords que les diagrammes de documentation n'atterrissent jamais vraiment) ; et activez le wrapper avec une douzaine d'éléments pour voir comment flex gère le débordement.
Il sert également de référence de travail : recréez la mise en page avec laquelle vous vous battez, trouvez la combinaison de propriétés qui la corrige et transférez les valeurs gagnantes vers votre CSS. Centrer un div — l'éternelle question — est justify-content: center; align-items: center, vérifiable ici en deux clics.