Dicas do DevTools: como inspecionar e depurar o flexbox CSS
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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ê faz 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.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2022-09-01 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2022-09-01 UTC."],[],[],null,[]]
