Generatore CSS Flexbox

Costruisci un esempio di Flexbox

1. Scegli la dimensione del campione, la direzione di scrittura, l'avvolgimento e l'allineamento.
2. Seleziona ciascun elemento per modificarne il testo, il dimensionamento flessibile, il comportamento minimo e l'ordine visivo.
3. Ispeziona gli assi e visualizza l'anteprima, quindi copia il frammento CSS e HTML corrente o scarica l'esempio completo.

Comprendi l'esempio

L'asse principale segue la riga o la colonna nella modalità di scrittura selezionata. Le impostazioni inverse ne modificano l'inizio e la fine; RTL non è semplicemente un ribaltamento orizzontale universale.

La base flessibile è una dimensione principale iniziale, non una larghezza finale garantita. La crescita, la riduzione ponderata, l'avvolgimento e le dimensioni minime automatiche influenzano tutti il ​​risultato del browser.

I controlli dell'ordine di origine modificano l'HTML. L'ordine CSS e le impostazioni inverse modificano la disposizione visiva senza modificare la lettura logica o l'ordine della tastiera.

L’esempio ha dimensioni border-box fisse, spaziatura interna, bordi e scorrimento. Lo spazio interno disponibile è minore; caratteri di sistema e barre di scorrimento possono modificare il layout.

Esperimenti utili

Assegna a tre elementi valori di crescita positivi e confronta il modo in cui viene condiviso lo spazio extra. Modificare il testo e i minimi automatici invece di dare per scontato che ogni elemento flessibile diventi uguale.

Attiva il ritorno a capo, riduci la larghezza dell’esempio e modifica align-content. Un contenitore nowrap ignora la proprietà; con il ritorno a capo attivo può agire anche su una sola riga.

Confronta LTR e RTL, quindi prova la scrittura verticale. Leggi le etichette fisiche di inizio e fine invece di dare per scontato che riga significhi sempre da sinistra a destra.

Sapere cosa viene generato

Questo è un esempio di componente a dimensione fissa limitata, non un generatore di pagine o una garanzia di responsive design. I tuoi contenuti reali e gli stili circostanti richiedono la loro revisione.

Le dimensioni minime automatiche possono impedire la contrazione prevista. L’opzione “Consenti dimensioni inferiori al contenuto” imposta esplicitamente entrambi i minimi a zero; lo strumento non lo fa di nascosto.

Adatta modifica solo la scala di visualizzazione. Utilizzare il 100% e le aree di scorrimento contenute per ispezionare i dettagli; il supporto per l'analisi o un'anteprima caricata non certifica il rendering di ogni browser.

Copia HTML fornisce un frammento che richiede anche il CSS. Il download completo contiene lo stesso documento dell’anteprima, con un piccolo reset degli stili del documento e una politica restrittiva delle risorse.

Creazione locale

Lo strumento non invia né salva il testo o il codice generato. La copia e il download completo avvengono solo su richiesta; gli altri servizi del sito seguono le proprie regole sulla privacy.