Banco di prova per flexbox
Flexbox Playground
Cambia ogni proprietà flex su un esempio dal vivo e mostra il CSS e che cosa ha cambiato ciascuna proprietà.
Tutte le proprietà di flexbox su un esempio dal vivo, con sotto ogni comando una riga che dice che cosa fa davvero. L’anteprima è il layout flex del browser stesso e il CSS è quello stato messo per iscritto, quindi ciò che si vede è ciò che farà la pagina.
Anteprima
Clicca un elemento per modificarne le proprietà qui a destra.
Contenitore
Elemento 1
Codice
- · L’asse principale è orizzontale.
- · Tutti i flex-grow sono a 0, quindi è justify-content a distribuire lo spazio libero.
Le proprietà lasciate al valore predefinito non vengono scritte. Compare solo quello che hai cambiato.
Come si usa
Impostare le proprietà del contenitore
Direzione, andata a capo e le tre proprietà di allineamento. Ognuna ha sotto una frase che spiega che cosa cambia: `align-content` in particolare, con una riga sola, non fa proprio nulla.
Fare clic su un elemento per modificarlo
Grow, shrink, basis, align-self e order si applicano a un singolo elemento. Aggiungendo e togliendo elementi si vede come il contenitore ridistribuisce lo spazio.
Leggere le note e copiare il CSS
Il pannello descrive che cosa farà davvero il layout corrente, e l’output omette ogni proprietà rimasta al valore predefinito: quello che si copia è solo quello che si è cambiato.
Domande frequenti
Perché il mio elemento deborda invece di restringersi?
O per un `flex-shrink: 0`, o per un figlio con una dimensione minima di contenuto. Il `min-width` di un elemento flex vale `auto` per impostazione predefinita, il che significa che non si restringerà sotto il proprio contenuto: il colpevole abituale è una stringa lunga senza spazi o un’immagine larga. Il rimedio è `min-width: 0`.
Che differenza c’è fra `align-items` e `align-content`?
`align-items` colloca ogni elemento sull’asse trasversale. `align-content` colloca il *blocco delle righe* quando l’andata a capo ne ha prodotta più di una: quindi con `nowrap`, o con una riga sola, non fa assolutamente nulla. È la causa più frequente del «questa proprietà è rotta».
Conviene usare `order` per riordinare le cose?
Con parsimonia. Cambia l’ordine visivo e non l’ordine del DOM, quindi le utilità di lettura dello schermo e l’ordine di tabulazione continuano a seguire il markup. Chi naviga da tastiera in un layout riordinato visivamente salta da una parte all’altra dello schermo, ed è per questo che la specifica lo definisce un’ultima risorsa.
Flexbox o grid?
Flexbox per una sola dimensione: una fila di pulsanti, una barra degli strumenti, l’interno di una scheda. Grid quando righe e colonne devono allinearsi le une alle altre. Se si stanno annidando contenitori flex per simulare una griglia, quello che serve è una griglia.
Può ricevere da
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Costruttore di griglie CSS
CSS Grid Builder
Dispone una griglia in modo visivo con le aree nominate e restituisce il CSS di grid-template.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.