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">
.
- Inspecione o elemento do contêiner.
- No painel Styles, é possível conferir o botão do editor flexbox ao lado da declaração
display: flex
. - 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.
- Para centralizar o texto na tela, clique nos botões
justify-content: center
ealign-items: center
. - O texto está centralizado agora. Observe que as declarações
justify-content: center
ealign-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.