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