Sofia Emelianova
O Chrome DevTools torna a depuração de layouts de flexbox CSS intuitiva. O painel Elements oferece um editor de Flexbox sensível ao contexto e uma sobreposição personalizável.
Assista ao vídeo para saber como:
- Use o Editor de Flexbox para mudar as propriedades do Flexbox com um clique em um botão, em vez de digitá-las.
- Alterne a sobreposição de flexbox na janela de visualização para conferir as mudanças que você fez imediatamente.
- Use a seção Elements > Layout > Flexbox para ver uma lista de todos os elementos e localizá-los na árvore DOM. Além disso, é possível personalizar as cores da sobreposição aqui.
Para saber mais sobre o flexbox do CSS em geral, consulte Aprender CSS > Flexbox.
Para uma experiência de depuração mais prática no DevTools, siga o tutorial Inspecionar e depurar layouts flexbox do CSS.