LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

Générateur Flexbox CSS

Idée interneUn outil manque ?

Construisez un conteneur flex visuellement et copiez le CSS

Réglez flex-direction, flex-wrap, justify-content, align-items et l'espacement sur un aperçu en direct construit avec de vrais éléments flex, puis copiez la déclaration de conteneur finale. Rien ne quitte votre navigateur.

Sortie
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

Flexbox comporte cinq propriétés qui interagissent, la direction change ce que signifie l'« axe principal » pour le retour à la ligne et justify-content, c'est pourquoi il est plus rapide de voir un changement que de l'imaginer. Cet outil garde un vrai conteneur flex à l'écran avec des éléments numérotés à l'intérieur, afin que chaque option soit jugée sur la façon dont les boîtes bougent réellement plutôt que sur une représentation mentale de la spécification.

Mode d'emploi

  1. Réglez flex-direction et flex-wrap.
  2. Choisissez justify-content et align-items, et ajustez l'espacement et le nombre d'éléments.
  3. Copiez la règle .container finale dans votre feuille de style.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

L'aperçu est-il une vraie mise en page flex ?
Oui. Les boîtes numérotées sont disposées avec le CSS exact que vous réglez, pas une image, donc ce que vous voyez est ce que produira la règle copiée.
Pourquoi changer flex-direction change-t-il ce que fait justify-content ?
justify-content agit toujours le long de l'axe principal, et flex-direction décide si cet axe principal est horizontal ou vertical. Passer en colonne transforme la « justification » de gauche/droite en haut/bas.
Quelque chose de ma mise en page est-il envoyé ?
Non. Le CSS est du texte assemblé dans la page à partir des réglages que vous choisissez, et l'aperçu est affiché localement.

Revenir à tous les outils