Generador y laboratorio CSS Flexbox
Modifica los ajustes para ver cómo se distribuyen los elementos. Copia las reglas del contenedor en tu hoja de estilos.
Se ejecuta localmente en tu navegador · display: flex · alignment · gap
Modifica los ajustes para ver cómo se distribuyen los elementos. Copia las reglas del contenedor en tu hoja de estilos.
Se ejecuta localmente en tu navegadorEl banco de trabajo escribe una sola regla para el contenedor: display: flex más flex-direction, flex-wrap, justify-content, align-items, align-content y gap. El escenario muestra cajas numeradas para que veas cómo interactúan los controles antes de llevar la regla a tu hoja de estilos.
No hay botón de ejecución: la vista previa y el panel de código siguen cada cambio. Copiar CSS pone ese mismo texto en el portapapeles y Restablecer devuelve la página al estado de carga: row, wrap, flex-start, stretch, stretch, 16 px, 6 elementos.
flex-direction fija el eje principal y el orden de las cajas; flex-wrap permite que los elementos salten a nuevas líneas; justify-content reparte el espacio libre del eje principal, así que su efecto se aprecia mejor mientras la línea no está completa.
align-items coloca los elementos dentro de su línea y align-content reparte las líneas entre sí. align-content solo mueve algo cuando el contenedor ocupa realmente más de una línea: con nowrap, o con una sola línea, no cambiará la posición aunque la declaración siga apareciendo en el CSS.
El escenario dibuja tantas cajas numeradas como pida el número de elementos y aplica los mismos valores que salen en el CSS. La etiqueta junto al título indica los ejes principal y transversal, y cambia las flechas al elegir una dirección de columna.
El número de elementos solo afecta a la vista previa: no forma parte de la regla exportada. Mientras align-items sea stretch las cajas ocupan toda la altura del contenedor; elige otra alineación o una separación fija si quieres comparar las líneas.
El código generado contiene un único bloque: .flex-container con display: flex y las seis declaraciones en el orden mostrado. No hay reglas por elemento, prefijos de proveedor ni media queries, así que solo hay que adaptar el nombre de la clase y los valores.
La herramienta se ejecuta en el navegador: los valores y las selecciones no salen de la página. Copiar CSS escribe ese mismo texto en el portapapeles y la línea de estado lo confirma, algo cómodo para preparar la regla de un proyecto antes de fijarla en la hoja de estilos.