⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

justifier-contenu : espace entre les explications (CSS)

Créez visuellement une mise en page CSS flexbox : flex-direction, justification-content, align-items, flex-wrap et gap sur le conteneur, ainsi que flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et du CSS copiable.

Traitement... 0%

Résultat

Cette page ouvre le générateur avec le contenu de justification défini sur espace entre les deux : la première boîte est alignée avec le bord de départ du conteneur, la dernière boîte est alignée avec son bord final et l'espace restant est divisé en espaces égaux entre les boîtes du milieu - jamais avant la première ou après la dernière.

C'est le détail que les gens confondent. space-around donne à chaque boîte une marge égale sur ses deux côtés, de sorte que les espaces entre les boîtes finissent par être deux fois plus larges que les espaces au niveau des deux bords extérieurs (chaque bord n'a qu'une marge d'une boîte, pas deux). space-uniform va plus loin et donne à chaque espace la même taille, y compris les deux bords extérieurs - le seul des trois où l'espacement semble parfaitement uniforme sur toute la longueur.

Basculez la liste déroulante justifier-contenu entre les trois valeurs ci-dessous et regardez les trois mêmes cases se réorganiser - c'est le moyen le plus rapide de voir la différence au lieu de la mémoriser. Copiez le CSS pour celui qui correspond à l'espacement souhaité.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Contrôles du conteneur : flex-direction, justification-content, align-items, flex-wrap et une entrée d'espace en pixels, appliqués en direct à l'aperçu.
  • Trois boîtes enfants codées par couleur par défaut (ajoutez jusqu'à huit, supprimez jusqu'à deux), chacune avec ses propres champs flex-grow, flex-shrink et flex-basis.
  • Bloc CSS copiable avec une règle .flex-container plus une règle .flex-item-N par enfant qui a des propriétés flex autres que celles par défaut.

Avantages clés

✓ Chaque contrôle de conteneur et chaque contrôle flex-grow, flex-shrink et flex-basis de chaque enfant mettent à jour trois zones d'aperçu numérotées en direct, afin que vous voyiez exactement ce que font vos règles flexbox avant de toucher une feuille de style.
✓ Le générateur n'imprime que les règles enfants qui diffèrent réellement des valeurs par défaut CSS, de sorte que le code copié reste court et lisible au lieu de reformuler flex-grow: 0 sur chaque case.
✓ Les pages prédéfinies résolvent les mises en page que les gens recherchent par nom : centrer un div, une barre de navigation logo-liens gauche-droite et colonnes flexibles de largeur égale - ouvrez-en une et l'outil est déjà configuré.

Cas d'utilisation

  • • Obtenez le CSS exact pour centrer un div à la fois horizontalement et verticalement en regardant justifier le contenu et aligner les éléments fonctionner sur les zones d'aperçu en direct.
  • • Créez une disposition de barre de navigation avec logo à gauche et liens à droite avec un espace entre les éléments et align-items: center, puis copiez le CSS du conteneur directement dans votre composant d'en-tête.
  • • Comparez l'espace entre, l'espace autour et l'espace uniformément côte à côte sur les trois mêmes cases au lieu de deviner laquelle correspond à l'espacement souhaité.