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

giustifica-contenuto: spiegazione dello spazio tra (CSS)

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 con giustifica-contenuto impostato su spazio-tra: la prima casella si trova a filo con il bordo iniziale del contenitore, l'ultima casella si trova a filo con il suo bordo finale e lo spazio rimanente è diviso in spazi uguali tra le caselle al centro — mai prima della prima o dopo l'ultima.

Questo è il dettaglio che la gente confonde. space-around dà a ogni riquadro un margine uguale su entrambi i lati, quindi gli spazi tra i riquadri risultano larghi il doppio degli spazi sui due bordi esterni (ogni bordo ottiene solo il margine di un riquadro, non due). space-evenly va oltre e rende ogni spazio della stessa dimensione, compresi i due bordi esterni, l'unico dei tre in cui la spaziatura sembra perfettamente uniforme su tutta la lunghezza.

Cambia il menu a discesa del contenuto giustificato tra i tre valori seguenti e guarda le stesse tre caselle riorganizzare: è il modo più veloce per vedere la differenza invece di memorizzarla. Copia il CSS per quello che corrisponde alla spaziatura che desideri effettivamente.

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