Sviluppatore / Layout CSS

Playground Flexbox: controlli CSS per contenitore ed elementi

Prova direzione flex, a capo, giustificazione, allineamento e spaziature, poi regola per ogni elemento grow, shrink, basis, order e allineamento. Osserva come cambia il layout e copia il CSS.

Playground Flexbox: controlli CSS per contenitore ed elementi: Mostra un contenitore flex in tempo reale con proprietà degli elementi modificabili e una breve spiegazione accanto a ogni controllo. L'anteprima ha un'altezza fissa per rendere visibili gli effetti sull'asse trasversale. I layout Grid con righe e colonne condivise sono disponibili nel generatore CSS Grid. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria: Strumenti per sviluppatori
Esecuzioni: Nel browser
Costo: Gratuito · senza registrazione
Disponibilità: Pronto all'uso

Banco di prova del layout FlexboxElaborazione locale

Funziona interamente nel browser

DirezioneImposta l'asse principale e la sua direzione.A capoConsente righe aggiuntive quando gli elementi non entrano.Giustifica contenutoDistribuisce lo spazio libero lungo l'asse principale.Allinea elementiAllinea gli elementi sull'asse trasversale all'interno di ogni riga.Allinea contenutoDistribuisce le righe sull'asse trasversale quando il wrapping crea più righe.Intervallo (px)Imposta lo spazio tra gli elementi e le righe adiacenti.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Usa flexbox per una riga o una colonna. Usa CSS Grid quando sia le righe sia le colonne devono condividere le tracce. Apri il generatore CSS Grid

Elemento selezionato 1EspandiQuota relativa dello spazio libero positivo.RiduciPeso relativo della riduzione, moltiplicato per la dimensione di base.BaseDimensione iniziale lungo l'asse principale prima dell'espansione o della riduzione.OrdineSolo l'ordine visivo; l'ordine di lettura e quello della tastiera restano invariati.Allinea elementoSostituisce per questo elemento l'allineamento sull'asse trasversale del contenitore.

Modello di layout Flex

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Lo spazio libero viene distribuito usando i pesi di crescita e riduzione di flex lungo l'asse principale.

Allineamento e accessibilità

Concetti di base di flexbox su MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . L'asse trasversale è perpendicolare a quello principale; il riordinamento visivo non modifica l'ordine del documento.

Come usarlo

Imposta direzione, a capo e allineamento del contenitore.
Fai clic su un elemento e modifica dimensionamento e allineamento individuali.
Aggiungi o rimuovi elementi, controlla il layout e copia il CSS generato.

Privacy e limitazioni

Le impostazioni del layout vengono elaborate localmente nel tuo browser.

Strumenti correlati

Domande frequenti

Perché align-content a volte non produce alcun effetto?

Distribuisce le linee flex. Per avere un effetto visibile sono necessari l'a capo, più linee e spazio libero sull'asse trasversale.

order modifica l'ordine per i lettori dello schermo?

No. Modifica l'ordine visivo, mentre l'ordine di lettura del documento e quello della tastiera restano invariati. Mantieni un ordine logico nel documento.

Quando dovrei usare Grid invece?

Usa Grid quando righe e colonne devono condividere le tracce. Flexbox è utile quando disponi gli elementi principalmente lungo un solo asse.

Strumento gratuito · nel browser esecuzioni · senza account