Conversor de colores
Convierte HEX, RGB y HSL con transparencia, previsualiza el color y copia valores CSS listos para usar.
Generador de CSS Flexbox
Prueba dirección, salto de línea, distribución y alineación y obtén el CSS y HTML correspondientes.
Acerca de esta herramienta
Organiza botones o controles y comprueba cómo se distribuyen cuando falta espacio.
Cómo se usa
Ajusta propiedades Flex, separación y número de elementos. Varía el ancho para comprobar los saltos de línea. Copia o descarga CSS y HTML por separado.
La vista previa usa las mismas propiedades que el resultado. Los elementos parten de 100 px de base y 80 px de altura mínima. Máximo 48 elementos, separación 0–80 px. El ancho de prueba no se exporta.
Preguntas frecuentes
¿Se exporta el ancho de la vista previa?
No, solo simula el espacio disponible. La salida incluye reglas flex y tamaños básicos de los elementos; configura el ancho real y el aspecto en tu página.
¿Por qué cambia el centrado al seleccionar column?
justify-content actúa sobre el eje principal y align-items sobre el transversal. Con row, el eje principal es horizontal; con column, es vertical. Para centrar en ambos, selecciona center en los dos controles y deja suficiente espacio en el contenedor en los ejes correspondientes.
Herramientas relacionadas
Se abre en una pestaña nueva
Comentarios
0