Sofia Emelianova
O Chrome DevTools torna a depuração de layouts flexbox CSS intuitivas. O painel Elementos oferece um Editor Flexbox baseado no contexto e uma sobreposição personalizável.
Assista o vídeo para saber como:
- Use o Flexbox Editor para alterar 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 imediatamente as alterações feitas.
- Use a seção Elementos > Layout > Flexbox para acessar uma lista de todos os elementos e localize-os na árvore do DOM. Além disso, você pode personalizar as cores da sobreposição aqui.
Para saber mais sobre o CSS flexbox 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 CSS.