Zona de juegos Flexbox: Flexbox CSS interactivo

flex-direction

justify-content

align-items

flex-wrap

gap (px)

items

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Cómo usar Zona de juegos flexible

Establezca el recuento de elementos para que coincida aproximadamente con su diseño real.
Invierta los menús desplegables (dirección, justificación de contenido, alineación de elementos, ajuste, espacio) y observe la respuesta.
Aprenda a invertir el eje: cambie de dirección y vuelva a probar justificar versus alinear: la información central de Flexbox.
Copie la combinación ganadora en su hoja de estilo. regla de contenedor.

¿Cuál es Zona de juegos flexible?

Un área de juegos de flexbox es una zona de pruebas interactiva para el sistema de diseño principal de CSS: menús desplegables para flex-direction, justify-content, align-items, flex-wrap y gap, un contenedor en vivo de elementos que reorganiza en el instante en que cambia uno: el bucle de causa y efecto que finalmente hace que flexbox haga clic.

El notorio obstáculo de aprendizaje de Flexbox es su sistema de ejes: justify-content funciona a lo largo del eje principal y align-items a lo largo del eje transversal, pero cuál es el que gira cuando la dirección cambia de fila a columna. Leer esa frase rara vez lo enseña; voltear el menú desplegable y mirar lo hace.

Sobre el Zona de juegos flexible

Establezca las propiedades del contenedor y observe cómo obedecen los elementos numerados: dirección de fila o columna, justificación desde inicio flexible hasta espacio uniforme, alineación, ajuste, tamaño de espacio y recuento de elementos: cada combinación es visible de inmediato.

Los experimentos que más enseñan: establezca la dirección en la fila, recorra el contenido de justificación a través de los seis valores, luego cambie la dirección a la columna y recorralos nuevamente: el cambio de eje se vuelve intuitivo en un minuto; comparar el espacio entre, el espacio alrededor y el espacio uniformemente uno al lado del otro (la diferencia en el espaciado de los bordes que los diagramas de documentación nunca llegan a identificar); y alternar ajuste con una docena de elementos para ver cómo flex maneja el desbordamiento.

Funciona como una referencia de trabajo: recrea el diseño con el que estás luchando, encuentra la combinación de propiedades que lo soluciona y transfiere los valores ganadores a tu CSS. Centrar un div (la eterna pregunta) es justify-content: center; align-items: center, verificable aquí en dos clics.

Preguntas Frecuentes

justificar contenido se distribuye a lo largo del eje principal (horizontal en la dirección de la fila), alinear elementos a lo largo del eje transversal (vertical en la fila). Cambie de dirección a columna e intercambiarán orientaciones; pruébelo aquí; es el rito de iniciación de flexbox.

En el contenedor: display:flex; justificar-contenido:centro; alinear elementos: centro. El históricamente difícil "centrar un div" consta de tres declaraciones: verifíquelo en vivo en el patio de recreo.

Manejo de bordes: entre no deja espacio en los bordes, alrededor les da a los bordes la mitad del espacio interior, uniformemente hace que todos los espacios sean iguales, incluidos los bordes. Vistos uno al lado del otro una vez, nunca más confundidos.

Cuando los artículos desbordan el contenedor: nowrap (predeterminado) los aprieta o los desborda; wrap fluye extras a nuevas líneas: el patrón de cuadrícula receptiva sin consultas de medios, especialmente con espacio.

Flexbox para flujo unidimensional (barras de navegación, filas de botones, pilas de tarjetas: el contenido dimensiona el diseño); Cuadrícula para estructura bidimensional (andamios de página, filas Y columnas alineadas: el diseño dimensiona el contenido). Las páginas reales usan ambos, anidadas.