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

Barre de navigation CSS Flexbox — Logo à gauche, liens à droite

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 préréglage du générateur flexbox avec la disposition classique de la barre de navigation : justifier le contenu défini sur l'espace entre les éléments et aligner les éléments sur le centre. Placez un logo dans la première case et une rangée de liens de navigation dans la dernière (ou divisez les liens entre les cases du milieu) et le conteneur flexbox les pousse vers les extrémités opposées de la barre tout en gardant chaque élément aligné sur le même centre vertical, quelle que soit la hauteur du logo ou du texte du lien.

l'espace entre est ce qui fait que cela fonctionne : il épingle le premier enfant au bord de départ et le dernier enfant au bord de fin, puis répartit uniformément tous les enfants restants entre eux - exactement la forme du logo gauche et des liens droits que presque tous les en-têtes de site utilisent. align-items: center résout ensuite l'alignement vertical qui nécessitait auparavant des hacks de hauteur de ligne ou des astuces d'affichage de cellules de tableau.

Ajustez le nombre d'enfants pour qu'il corresponde à votre vraie barre de navigation - deux cases pour un logo nu et une barre CTA, plus pour le logo et plusieurs liens - et regardez la mise en page s'adapter en direct. Copiez le bloc CSS une fois qu'il correspond à votre en-tête, ou ouvrez le préréglage d'espace entre les deux si vous souhaitez voir cette propriété comparée à ses proches parents.

🛡️
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é.