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

Colonne Flexbox di uguale larghezza: generatore 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 flex-grow: 1 già impostato su tutte e tre le caselle di anteprima. Guardali: invece di restringersi per adattarsi al contenuto, ogni casella rivendica una quota identica dello spazio rimanente nella riga, che è l'intera ricetta per colonne flessibili di uguale larghezza: nessuna larghezza percentuale, nessun calc(), nessuna matematica fissa dei pixel da mantenere sincronizzata.

flex-grow: 1 dice a un bambino di crescere, e impostarlo su ogni bambino della fila significa che tutti crescono della stessa quantità, quindi finiscono con la stessa larghezza indipendentemente da quanti ce ne sono o dal contenuto che si trova al loro interno. Aggiungi o rimuovi una casella con i controlli sottostanti e le colonne rimanenti si ridistribuiranno immediatamente per rimanere uguali: ridimensiona una finestra del browser su questo layout in produzione e si comporterà allo stesso modo.

Questo è lo schema alla base delle griglie delle carte di uguale altezza, delle colonne della tabella dei prezzi e delle sezioni del piè di pagina equamente divise. Dai più spazio a una colonna alzando il suo flex-grow sopra le altre, oppure copia il blocco CSS sottostante esattamente come generato per una divisione equa e pulita.

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