Barre de navigation CSS Flexbox — Logo à gauche, liens à droite
Créez visuellement une mise en page CSS flexbox : flex-direction, justify-content, align-items, flex-wrap et gap sur le conteneur, plus flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et un CSS copiable.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur flexbox préréglé sur la disposition classique d'une barre de navigation : justify-content réglé sur space-between et align-items réglé sur center. Placez un logo dans la première boîte et une rangée de liens de navigation dans la dernière (ou répartissez les liens dans les boîtes du milieu) et le conteneur flexbox les pousse aux 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 des liens.
C'est space-between qui rend cela possible : il épingle le premier enfant au bord de début et le dernier enfant au bord de fin, puis répartit uniformément les éventuels enfants restants entre eux — exactement la forme logo à gauche, liens à droite que presque tous les en-têtes de site utilisent. align-items: center résout ensuite l'alignement vertical qui nécessitait auparavant des astuces de line-height ou des affichages en table-cell.
Ajustez le nombre d'enfants pour qu'il corresponde à votre vraie barre de navigation — deux boîtes pour une barre minimale logo et appel à l'action, plus pour un logo accompagné de plusieurs liens — et regardez la disposition s'adapter en direct. Copiez le bloc CSS une fois qu'il correspond à votre en-tête, ou ouvrez le préréglage space-between si vous souhaitez voir cette propriété comparée à ses proches parentes.