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 da questa pagina web: Centrare un elemento di testo con Flexbox.

Scopri Flexbox CSS

Quando a un elemento HTML della pagina viene applicato display: flex o display: inline-flex, accanto al relativo elemento viene visualizzato un badge flex nel riquadro Elementi.

Modificare i layout con l'editor flexbox

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

1. Esamina l'elemento contenitore.
2. Nel riquadro Stili, puoi vedere il pulsante dell'editor flexbox accanto alla dichiarazione display: flex.
3. Fai clic per aprire l'editor di Flexbox. L'editor mostra 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. Tieni presente che le dichiarazioni justify-content: center e align-items: center vengono aggiunte nel riquadro Stili.

Esamina 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, con linee tratteggiate per mostrare la posizione dei 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 di Flex vengono ruotate di conseguenza. Anche l'overlay viene aggiornato immediatamente.

Regolare il colore dell'overlay 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 a essa. Ad esempio, il colore dell'overlay container viene modificato in nero.

Per passare a un elemento flexbox nella struttura DOM, puoi fare clic sull'icona del selettore accanto.