Inspecionar e depurar layouts Flexbox CSS

Jecelyn Yeen

Este guia mostra como descobrir elementos flexbox em uma página, além de inspecionar e modificar os layouts de 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, um selo flex aparece 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, confira 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 Estilos, há o botão do editor flexbox ao lado da declaração display: flex.
3. Clique nele para abrir o editor flexbox. O editor exibe uma lista de propriedades do 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. Agora o texto está centralizado. Observe que as declarações justify-content: center e align-items: center foram adicionadas ao painel Estilos.

Examinar o layout flexbox

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

Como alternativa, você pode clicar no selo para alternar a exibição da sobreposição flexbox.

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

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

Ajustar a cor da sobreposição de flexbox

Abra o painel Layout e role para baixo até a seção Flexbox. Veja 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 clicar 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 é alterada para preto.

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