En esta guía, se muestra cómo descubrir los elementos de flexbox en una página, así como inspeccionar y modificar los diseños de estas plataformas 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 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 Elementos.
Cómo modificar diseños con el editor de Flexbox
Puedes modificar los diseños de Flexbox de forma visual con el editor de Flexbox. Por ejemplo, aquí 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 propiedades de Flexbox. Las opciones de valores 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.
- El texto ahora 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 flexbox en el panel Elements para visualizar el diseño. La superposición aparece 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 cambia según corresponda.
Los íconos del editor flexible se adaptan al contexto. Cambiará según la dirección del diseño. Por ejemplo, cuando cambias el flex-direction a column, los íconos del editor flexible 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. Puede ver todos los elementos de Flexbox de la página aquí.
Puedes marcar o desactivar la superposición de cada elemento de Flexbox con la casilla de verificación al lado. Es lo mismo que cuando haces clic en badge en el árbol del DOM.
Además, puedes cambiar el color de la superposición al hacer clic en el icono de color que se encuentra a su lado. Por ejemplo, el color de la superposición container se cambia a negro.
Para navegar a un elemento flexbox en el árbol del DOM, puedes hacer clic en el ícono del selector que se encuentra a su lado.