Générateur de boîtes flexibles CSS

Créer un exemple Flexbox

1. Choisissez la taille de l’échantillon, le sens d’écriture, le retour à la ligne et l’alignement.
2. Sélectionnez chaque élément pour modifier son texte, sa taille flexible, son comportement minimum et son ordre visuel.
3. Inspectez les axes et prévisualisez, puis copiez le fragment CSS et HTML actuel ou téléchargez l'exemple complet.

Comprendre l'exemple

L'axe principal suit la ligne ou la colonne dans le mode d'écriture sélectionné. Les paramètres inversés modifient son début et sa fin ; RTL n'est pas simplement un retournement horizontal universel.

La base flexible est une taille principale de départ et non une largeur finale garantie. La croissance, le rétrécissement pondéré, l'enroulement et les tailles minimales automatiques influencent tous le résultat du navigateur.

Les contrôles d'ordre source modifient le code HTML. L'ordre CSS et les paramètres inversés modifient la disposition visuelle sans modifier la lecture logique ou l'ordre du clavier.

L’exemple a des dimensions border-box fixes, une marge intérieure, des bordures et un défilement. L’espace intérieur disponible est plus petit ; les polices système et les barres de défilement peuvent modifier la disposition.

Expériences utiles

Donnez à trois éléments des valeurs de croissance positives et comparez la façon dont l'espace supplémentaire est partagé. Modifiez leur texte et leurs minimums automatiques plutôt que de supposer que chaque élément flexible devient égal.

Activez le retour à la ligne, réduisez la largeur de l’exemple et modifiez align-content. Un conteneur nowrap ignore cette propriété ; avec retour à la ligne, elle peut agir même sur une seule ligne.

Comparez LTR et RTL, puis essayez l'écriture verticale. Lisez les étiquettes physiques de début et de fin au lieu de supposer que la ligne signifie toujours de gauche à droite.

Sachez ce qui est généré

Il s'agit d'un exemple limité de composant de taille fixe, et non d'un générateur de pages ou d'une garantie de conception réactive. Votre contenu réel et les styles environnants nécessitent leur propre révision.

Les tailles minimales automatiques peuvent empêcher la réduction attendue. L’option « Autoriser une taille inférieure au contenu » fixe explicitement les deux minimums à zéro ; l’outil ne le fait pas à votre insu.

L'ajustement modifie uniquement l'échelle de visualisation. Utilisez 100 % et les zones de défilement contenues pour inspecter les détails ; la prise en charge de l'analyse syntaxique ou un aperçu chargé ne certifie pas le rendu de chaque navigateur.

Copier HTML fournit un fragment qui nécessite aussi le CSS. Le téléchargement complet contient le même document que l’aperçu, avec une petite réinitialisation des styles du document et une politique restrictive des ressources.

Création locale

L’outil n’envoie ni n’enregistre votre texte ou le code généré. La copie et le téléchargement complet ont lieu uniquement sur demande ; les autres services du site suivent leurs propres règles de confidentialité.