Imposta justify-content su space-between e align-items su center. Il CSS contiene display: flex;, justify-content: space-between; e align-items: center;: il primo e l’ultimo elemento toccano i bordi e tutti sono centrati verticalmente nella riga.
Da ricordare
justify-content agisce lungo l’asse principale e align-items su quello trasversale, quindi con flex-direction: column si scambiano e justify-content diventa verticale. Usa grid quando gli elementi devono allinearsi sia per righe sia per colonne.
Informazioni su questo strumento
The CSS Flexbox Playground è un editor interattivo per le principali proprietà di layout di un contenitore flex. Scegli i valori per flex-direction, justify-content, align-items e flex-wrap da quattro menu a discesa, e un'anteprima di cinque riquadri numerati si riorganizza all'istante, così puoi vedere come ogni proprietà modella il layout prima di scrivere qualsiasi codice.
Sotto l'anteprima, la regola .container corrispondente viene generata mentre lavori: display: flex seguito dalle quattro dichiarazioni che hai scelto. Un pulsante copia l'intero blocco nei tuoi appunti, pronto da incollare in un foglio di stile. Vengono esposte solo queste proprietà a livello di contenitore; le impostazioni per singolo elemento come flex-grow, order o align-self non sono trattate.
Tutto avviene nel tuo browser. Nulla viene caricato, non ci sono account né tracciamento, e funziona offline. È un modo rapido per costruire intuizione su flexbox o per produrre una regola di partenza che poi affini a mano.
Domande frequenti
Cosa mostra l'anteprima?
Un contenitore flex che ospita cinque riquadri numerati che si riorganizzano in tempo reale mentre cambi flex-direction, justify-content, align-items o flex-wrap.
Il CSS generato è pronto all'uso?
Sì. Copia la regola .container generata direttamente nel tuo foglio di stile; contiene display: flex più le quattro proprietà che hai selezionato.
Quali proprietà flexbox posso regolare?
Quattro menu a discesa controllano flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) e flex-wrap (nowrap, wrap, wrap-reverse).
L'output include il gap o le impostazioni flex per singolo elemento?
No. La regola copiata contiene solo display: flex e le quattro proprietà del contenitore. Il gap di 8px nell'anteprima serve solo per la spaziatura, e le proprietà a livello di elemento come flex-grow, order o align-self non sono incluse.