Ispezionare ed eseguire il debug dei layout flexbox CSS

Jecelyn Yeen

Questa guida illustra come scoprire elementi flexbox in una pagina, nonché ispezionare e modificare i layout delle flexbox nel riquadro Elementi.

Gli screenshot visualizzati in questo articolo provengono dalla pagina web Centrare un elemento di testo con Flexbox.

Scopri Flexbox CSS

Quando a un elemento HTML della tua pagina sono applicati display: flex o display: inline-flex, puoi visualizzare un badge flex accanto a questo elemento nel riquadro Elementi.

Modificare i layout con l'editor flexbox

Puoi modificare visivamente i layout delle flexbox con l'editor flexbox. Ad esempio, puoi centrare il testo <h1> di questa pagina demo nel relativo contenitore <div class="container">.

1. Ispeziona l'elemento contenitore.
2. Nel riquadro Stili, puoi visualizzare il pulsante dell'editor flexbox accanto alla dichiarazione display: flex.
3. Fai clic sul pulsante per aprire l'editor flexbox. L'editor visualizza un elenco di proprietà flexbox. Le opzioni per i valori di ciascuna proprietà sono visualizzate come pulsanti icona.
4. Per centrare il testo sullo schermo, puoi fare clic sui pulsanti justify-content: center e align-items: center.
5. Ora il testo è centrato. Nota che le dichiarazioni justify-content: center e align-items: center vengono aggiunte nel riquadro Stili.

Esaminare il layout flexbox

Puoi passare il mouse sopra l'elemento flexbox nel riquadro Elementi per visualizzare il layout. L'overlay viene visualizzato sopra l'elemento, tracciato con linee tratteggiate per mostrare la posizione dei relativi contenuti e degli elementi.

In alternativa, puoi fare clic sul badge per attivare/disattivare la visualizzazione dell'overlay flexbox.

Prova a modificare il valore in justify-content: flex-end. L'overlay viene modificato di conseguenza.

Le icone nell'editor flessibile sono sensibili al contesto. Cambierà in base alla direzione del layout. Ad esempio, quando cambi flex-direction in column, le icone nell'editor flessibile vengono ruotate di conseguenza. Anche l'overlay viene aggiornato immediatamente.

Regola il colore dell'overlay del flexbox

Apri il riquadro Layout e scorri verso il basso fino alla sezione Flexbox. Qui puoi visualizzare tutti gli elementi flexbox della pagina.

Puoi attivare/disattivare l'overlay di ogni elemento flexbox con la casella di controllo accanto. È lo stesso che fai clic su badge nell'albero DOM.

Puoi anche modificare il colore della sovrapposizione facendo clic sull'icona del colore accanto. Ad esempio, il colore dell'overlay container viene impostato sul nero.

Per passare a un elemento flexbox nell'albero DOM, puoi fare clic sull'icona del selettore accanto a questo elemento.