⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Barra di navigazione CSS Flexbox: logo a sinistra, collegamenti a destra

Crea visivamente un layout flexbox CSS: direzione flessibile, giustifica contenuto, allineamento elementi, avvolgimento flessibile e spazio sul contenitore, oltre a flex-grow per figlio, flex-shrink e flex-basis, il tutto con un'anteprima dal vivo e CSS copiabile.

Elaborazione... 0%

Risultato

Questa pagina apre il generatore flexbox preimpostato sul classico layout della barra di navigazione: giustifica contenuto impostato su spazio tra e allinea elementi impostati al centro. Inserisci un logo nella prima casella e una riga di collegamenti di navigazione nell'ultima (o dividi i collegamenti nelle caselle centrali) e il contenitore flexbox li spinge alle estremità opposte della barra mantenendo ogni elemento allineato sullo stesso centro verticale, non importa quanto sia alto il logo o il testo del collegamento.

lo spazio tra è ciò che fa funzionare questo: fissa il primo figlio al bordo iniziale e l'ultimo figlio al bordo finale, quindi distribuisce uniformemente tutti i figli rimanenti tra di loro - esattamente la forma del logo sinistro e dei collegamenti a destra utilizzati da quasi tutte le intestazioni del sito. align-items: center risolve quindi l'allineamento verticale che richiedeva hack per l'altezza della linea o trucchi per la visualizzazione delle celle della tabella.

Regola il conteggio dei bambini in modo che corrisponda alla tua barra di navigazione reale (due caselle per una barra con logo e CTA, più per il logo e diversi collegamenti) e osserva il layout adattarsi dal vivo. Copia il blocco CSS una volta che corrisponde alla tua intestazione o apri la preimpostazione dello spazio tra se vuoi vedere quella proprietà confrontata con i suoi parenti stretti.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Controlli del contenitore: direzione flessibile, giustificazione contenuto, allineamento elementi, avvolgimento flessibile e input di gap in pixel, applicati in tempo reale all'anteprima.
  • Tre caselle secondarie codificate a colori per impostazione predefinita (aggiungi fino a otto, rimuovi fino a due), ciascuna con i propri campi flex-grow, flex-shrink e flex-basis.
  • Blocco CSS copiabile con una regola .flex-container più una regola .flex-item-N per figlio con proprietà flex non predefinite.

Vantaggi principali

✓ Ogni controllo del contenitore e flex-grow, flex-shrink e flex-basis di ogni bambino aggiornano in tempo reale tre caselle di anteprima numerate, in modo da poter vedere esattamente cosa fanno le regole del flexbox prima di toccare un foglio di stile.
✓ Il generatore stampa solo le regole figlie che effettivamente differiscono dalle impostazioni predefinite CSS, quindi il codice copiato rimane breve e leggibile invece di ripetere flex-grow: 0 su ogni casella.
✓ Le pagine preimpostate risolvono i layout che le persone cercano per nome: centrando un div, una barra di navigazione con logo-link a sinistra-barra di navigazione a destra e colonne flessibili di uguale larghezza: aprine una e lo strumento è già configurato.

Casi d'uso

  • • Ottieni il CSS esatto per centrare un div sia orizzontalmente che verticalmente osservando il funzionamento di giustifica contenuto e allineamento elementi sui riquadri di anteprima dal vivo.
  • • Crea un layout della barra di navigazione con logo a sinistra e collegamenti a destra con spazio tra e allineamento elementi: centro, quindi copia il CSS del contenitore direttamente nel componente dell'intestazione.
  • • Confronta lo spazio tra, lo spazio intorno e lo spazio uniformemente fianco a fianco sulle stesse tre caselle invece di indovinare quale corrisponde alla spaziatura desiderata.