Questa guida mostra come scoprire gli elementi flexbox in una pagina, nonché come esaminare e modificare i layout flexbox nel riquadro Elementi.
Gli screenshot visualizzati in questo articolo provengono dalla pagina web Centra un elemento di testo con Flexbox.
Scopri Flexbox CSS
Quando a un elemento HTML sulla tua pagina è applicato display: flex o display: inline-flex, puoi vedere un badge flex accanto all'elemento 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 dimostrativa all'interno del relativo contenitore <div class="container">.
- Ispeziona l'elemento contenitore.
- Nel riquadro Stili, puoi vedere il pulsante dell'editor flexbox accanto alla dichiarazione
display: flex.
- Fai clic per aprire l'editor flexbox. L'editor mostra un elenco di proprietà flexbox. Le opzioni per i valori di ogni proprietà vengono visualizzate come pulsanti icona.
- Per centrare il testo sullo schermo, puoi fare clic sui pulsanti
justify-content: centerealign-items: center.
- Ora il testo è centrato. Tieni presente che le dichiarazioni
justify-content: centerealign-items: centervengono 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, con linee tratteggiate per mostrare la posizione dei relativi contenuti e 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 modifichi flex-direction in column, le icone nell'editor flessibile 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. Puoi visualizzare tutti gli elementi flexbox della pagina qui.
Puoi attivare/disattivare l'overlay di ogni elemento flexbox tramite la casella di controllo accanto. È lo stesso che fai clic sulla badge nell'albero DOM.
Inoltre, puoi modificare il colore dell'overlay facendo clic sull'icona del colore accanto. Ad esempio, il colore dell'overlay container viene modificato in nero.
Per passare a un elemento flexbox nell'albero DOM, fai clic sull'icona del selettore accanto all'elemento.