# Playground CSS flexbox

> Esplora visivamente allineamento, wrapping e spaziatura.

[Open tool](https://www.toolcabana.com/it/css-flexbox-playground) · [Design e CSS](https://www.toolcabana.com/it/category/design-and-css)

Tool ID: css-flexbox-playground. Requested language: it. Description language: it. Complete guide translation: yes.

## Overview (en)

CSS flexbox playground previews a flex container with 1 to 30 numbered items and writes the matching CSS. Set flex-direction (row, column or their reverses), justify-content including space-between and space-evenly, align-items, wrap or nowrap, and a gap from 0 to 100 px, then copy the six declarations once the preview looks right.

## Supported tasks (it)

Esplora visivamente allineamento, wrapping e spaziatura.

## Steps (it)

1. Inserisci i valori richiesti nel pannello delle impostazioni.
2. Regola le impostazioni di base, poi apri la modalità avanzata per le opzioni di esportazione e ottimizzazione. Le impostazioni personalizzate restano attive quando il pannello è chiuso.
3. Esegui Playground CSS flexbox, esamina il risultato, poi usa i controlli disponibili per copiare o scaricare.

## Settings

- Direzione (it; key: direction; type: select): row [it], column [it], row-reverse [it], column-reverse [it]
- Giustifica contenuto (it; key: justify; type: select): flex-start [it], center [it], flex-end [it], space-between [it], space-around [it], space-evenly [it]
- Allinea elementi (it; key: align; type: select): stretch [it], flex-start [it], center [it], flex-end [it]
- A capo (it; key: wrap; type: select): wrap [it], nowrap [it]
- Gap (px) (it; key: gap; type: number); minimum: 0; maximum: 100
- Elementi (it; key: items; type: number); minimum: 1; maximum: 30

## Limitations (it)

Le immagini usano il limite esistente della canvas di 32 megapixel. Dove supportato sono consentite fino a 100 immagini di origine. L'HTML incollato è limitato a 200.000 caratteri; i diagrammi Mermaid a 20.000 caratteri e 300 righe. La generazione di SVG e PNG richiede un browser.

## Privacy and connections (it)

Questa operazione elabora i dati di origine nel tuo browser. Copia e download sono azioni esplicite; l'input di origine non viene salvato in un account né in una cronologia.

## Questions (it)

### What is the difference between space-between, space-around and space-evenly?

space-between puts the first and last items at the edges with equal gaps between items. space-around gives each item equal space on both sides, so edge gaps are half the inner ones. space-evenly makes every gap, including the edges, the same. Try each in the preview.

### Why does align-items seem to do nothing in the flexbox preview?

align-items works on the cross axis. With direction row, it moves items vertically inside the 220 px tall preview, and stretch makes them fill that height. With column, it acts horizontally, so switch direction to see the change.

### Does the flexbox playground set flex properties on the items?

No. The output covers only the container: display, flex-direction, justify-content, align-items, flex-wrap and gap. Item properties like flex-grow or order are not generated, so add them separately if individual items need to size differently.

### Dove viene elaborato il mio input?

Questa operazione elabora i dati di origine nel tuo browser. Copia e download sono azioni esplicite; l'input di origine non viene salvato in un account né in una cronologia.

### Quali sono i limiti di input?

Le immagini usano il limite esistente della canvas di 32 megapixel. Dove supportato sono consentite fino a 100 immagini di origine. L'HTML incollato è limitato a 200.000 caratteri; i diagrammi Mermaid a 20.000 caratteri e 300 righe. La generazione di SVG e PNG richiede un browser.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/it/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/it/css-grid-layout-generator)
- [CSS cubic Bezier editor](https://www.toolcabana.com/it/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/it/css-clip-path-maker)