Inspecionar e depurar layouts Flexbox CSS

Este guia mostra como descobrir elementos flexbox em uma página, assim como inspecionar e modificar os layouts flexbox no painel Elementos.

As capturas de tela que aparecem neste artigo são desta página da Web: Como centralizar um elemento de texto com o Flexbox.

Conheça o flexbox CSS

Quando um elemento HTML na sua página tem display: flex ou display: inline-flex aplicado, você pode ver um selo flex ao lado dele no painel Elementos.

Modificar layouts com o editor flexbox

É possível modificar visualmente os layouts flexbox com o editor de flexbox. Por exemplo, veja como centralizar o texto <h1> desta página de demonstração no contêiner <div class="container">.

1. Inspecione o elemento do contêiner.
2. No painel Styles, é possível conferir o botão do editor flexbox ao lado da declaração display: flex.
3. Clique nele para abrir o editor flexbox. O editor mostra uma lista de propriedades flexbox. As opções de valor de cada propriedade são mostradas como botões de ícone.
4. Para centralizar o texto na tela, clique nos botões justify-content: center e align-items: center.
5. O texto está centralizado agora. Observe que as declarações justify-content: center e align-items: center são adicionadas no painel Estilos.

Analisar o layout flexbox

Passe o cursor sobre o elemento flexbox no painel Elementos para visualizar o layout. A sobreposição aparece sobre o elemento, dispostas com linhas pontilhadas para mostrar a posição do conteúdo e dos itens.

Como alternativa, é possível clicar no selo para alternar a exibição da sobreposição de flexbox.

Tente mudar o valor para justify-content: flex-end. A sobreposição será alterada adequadamente.

Os ícones no editor flexível dependem do contexto. Ela mudará de acordo com a direção do layout. Por exemplo, quando você muda flex-direction para column, os ícones no editor flexível são girados corretamente. A sobreposição também é atualizada imediatamente.

Ajustar a cor de sobreposição do flexbox

Abra o painel Layout e role para baixo até a seção Flexbox. É possível ver todos os elementos flexbox da página aqui.

É possível alternar a sobreposição de cada elemento flexbox com a caixa de seleção ao lado. É o mesmo que você clica em badge na árvore do DOM.

Além disso, você pode alterar a cor da sobreposição clicando no ícone de cor ao lado dela. Por exemplo, a cor da sobreposição container muda para preto.

Para navegar até um elemento flexbox na árvore do DOM, clique no ícone de seletor ao lado dele.