Sofia Emelianova
Chrome DevTools semplifica il debug dei layout flexbox CSS. Il riquadro Elementi fornisce un editor flexbox sensibile al contesto e un overlay personalizzabile.
Guarda il video per scoprire come:
- Utilizza l'editor Flexbox per modificare le proprietà flexbox con un clic di un pulsante anziché digitarle.
- Attiva/disattiva l'overlay flexbox nel viewport per vedere immediatamente le modifiche apportate.
- Utilizza la sezione Elementi > Layout > Flexbox per visualizzare un elenco di tutti gli elementi e individuarli nella struttura ad albero DOM. Inoltre, puoi personalizzare i colori dell'overlay qui.
Per scoprire di più su flexbox CSS in generale, consulta Imparare CSS > Flexbox.
Per un'esperienza di debug più pratica in DevTools, segui il tutorial Ispeziona e esegui il debug dei layout flexbox CSS.