.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Qu'est-ce que le Flexbox Generator ?
Le générateur Flexbox est un terrain de jeu visuel pour la disposition des boîtes flexibles CSS. Vous définissez les propriétés du conteneur avec des boutons et des curseurs, regardez un aperçu en direct réorganiser les éléments en temps réel et copiez le CSS exact utilisé par l'aperçu. Il supprime les conjectures de la mémoire de quelle propriété fait quoi, afin que vous puissiez créer une ligne, une colonne, une disposition centrée ou une grille d'emballage de cartes sans essais ni erreurs dans les outils de développement du navigateur.
Flexbox est un modèle de mise en page unidimensionnel : les éléments sont disposés le long d'un axe principal et alignés sur l'axe transversal Le conteneur entraîne presque tout à travers six propriétés. flex-direction choisit l'axe principal et si elle va vers l'avant ou vers l'arrière justify-content distribue l'espace libre le long de l'axe principal aligner-items positionne les éléments sur l'axe transversal flex-wrap décide si les éléments débordent sur de nouvelles lignes, et aligner-content espace ces lignes une fois l'emballage est sur. gap ajoute un espacement cohérent entre les éléments sans marges.
Cet outil expose toutes ces propriétés en un seul endroit et affiche le résultat immédiatement Parce que l'aperçu est rendu avec les mêmes déclarations qui apparaissent dans la boîte de sortie, ce que vous voyez est exactement ce que vous obtenez lorsque vous collez le CSS dans votre feuille de style La règle générée cible une classe .container par défaut et répertorie uniquement les propriétés qui comptent, y compris aligner-contenu uniquement lorsque l'emballage est activé, puisqu'il n'a aucun effet sur une seule ligne.
Tout tourne entièrement dans votre navigateur Il n'y a pas d'inscription, rien n'est téléchargé et l'outil continue de fonctionner hors ligne une fois la page chargée Il est tout aussi utile comme aide à l'apprentissage pour comprendre comment les propriétés flex interagissent et comme moyen rapide de produire des CSS prêts pour la production Modifiez le nombre d'éléments d'aperçu, redimensionnez le conteneur dans votre tête et lisez la déclaration qui produit l'alignement souhaité, qu'il s'agisse d'une barre de navigation étalée avec l'espace entre les deux ou d'une section héros parfaitement centrée sur les deux axes.
Comment utiliser le Générateur Flexbox ?
Choisissez la direction et enveloppez
Choisissez la direction flexible et si les éléments doivent s'enrouler sur plusieurs lignes.
Définir l'alignement
Ajustez le contenu de justification sur l'axe principal et alignez les éléments sur l'axe transversal jusqu'à ce que l'aperçu corresponde à votre disposition.
Espacement des sunes
Définissez l'écart entre les éléments et, lorsque l'emballage est activé, le contenu d'alignement qui espace les lignes.
Copiez le CSS
Les mises à jour de règles générées en direct Copiez-le en un clic et collez-le dans votre feuille de style.
Principales caractéristiques
Aperçu en direct
Un conteneur d'éléments échantillons se réafflue instantanément lorsque vous modifiez vos propriétés, vous voyez donc la mise en page avant de copier du code
Chaque propriété de conteneur
Afficheur de contrôle, direction flexible, emballage flexible, contenu justifié, éléments d'alignement, contenu d'alignement et espacement à partir d'un panneau
Ce que vous voyez est ce que vous obtenez
L'aperçu utilise les mêmes déclarations que la sortie, donc le CSS copié produit exactement la mise en page à l'écran
Sortie propre et minimale
La règle générée répertorie uniquement les propriétés significatives et omet le contenu d'alignement jusqu'à ce que l'emballage soit activé
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!