En esta guía, se muestra cómo descubrir elementos de Flexbox en una página, así como inspeccionar y modificar los diseños de Flexbox en el panel Elements.
Las capturas de pantalla que aparecen en este artículo son de esta página web: Cómo centrar un elemento de texto con Flexbox.
Descubre Flexbox de CSS
Cuando se aplica una display: flex o display: inline-flex a un elemento HTML de tu página, puedes ver la insignia flex junto a él en el panel Elements.
Modifica diseños con el editor de flexbox
Puedes modificar los diseños de Flexbox visualmente con el editor de Flexbox. Por ejemplo, a continuación, se muestra cómo puedes centrar el texto <h1> de esta página de demostración dentro de su contenedor <div class="container">.
- Inspecciona el elemento contenedor.
- En el panel Styles, puedes ver el botón del editor de Flexbox junto a la declaración
display: flex.
- Haz clic en él para abrir el editor de Flexbox. En el editor, se muestra una lista de las propiedades de flexbox. Las opciones de valor de cada propiedad se muestran como botones de ícono.
- Para centrar el texto en la pantalla, puedes hacer clic en los botones
justify-content: centeryalign-items: center.
- Ahora el texto está centrado. Observa que las declaraciones
justify-content: centeryalign-items: centerse agregan en el panel Styles.
Examina el diseño de Flexbox
Puedes colocar el cursor sobre el elemento de Flexbox en el panel Elements para visualizar el diseño. La superposición aparecerá sobre el elemento, dispuesta con líneas punteadas para mostrar la posición de su contenido y sus elementos.
También puedes hacer clic en la insignia para activar o desactivar la visualización de la superposición de Flexbox.
Intenta cambiar el valor a justify-content: flex-end. La superposición se modifica en consecuencia.
Los íconos del editor flexible se adaptan al contexto. Cambia según la dirección del diseño. Por ejemplo, cuando cambias flex-direction a column, los íconos del editor de Flex se rotan según corresponda. La superposición también se actualiza de inmediato.
Ajustar el color de superposición de Flexbox
Abre el panel Layout y desplázate hacia abajo hasta la sección Flexbox. Puedes ver todos los elementos de flexbox de la página aquí.
Puedes activar o desactivar la superposición de cada elemento de Flexbox con la casilla de verificación a su lado. Es lo mismo que haces clic en el badge en el árbol del DOM.
Aparte de eso, puedes cambiar el color de la superposición haciendo clic en el icono de color que se encuentra junto a ella. Por ejemplo, el color de la superposición container se cambia a negro.
Para navegar a un elemento de flexbox en el árbol del DOM, puedes hacer clic en el ícono del selector que está junto a él.