Generador de flexbox CSS
Crea un contenedor flex y sus elementos de forma visual, luego copia el CSS, clases Tailwind o estilo en línea.
Generador de flexbox CSS
Define flex-direction, flex-wrap, justify-content, align-items y align-content desde menús desplegables, añade una separación en cualquier unidad, y esta herramienta escribe la regla del contenedor flex — junto con una regla correspondiente para sus elementos y una vista previa que muestra cómo se alinean los elementos. Úsala para diseñar una barra de navegación, una fila de tarjetas, una barra de herramientas de formulario o cualquier diseño que necesite distribuir, centrar o ajustar elementos sin necesidad de recurrir a una cuadrícula completa.
Los controles de elementos aplican flex-grow, flex-shrink y flex-basis uniformemente en todos los elementos que elijas, que es exactamente cómo funcionan la mayoría de las filas flex reales: una clase de elemento que rige varios elementos en lugar de valores individuales por elemento. Align-content solo aparece en la salida cuando flex-wrap está configurado en wrap o wrap-reverse, porque los navegadores lo ignoran en caso contrario — la herramienta nunca imprime una declaración que no tenga efecto.
Elige el formato de salida que coincida con cómo construyes: CSS plano para una hoja de estilos, clases de utilidad Tailwind (los corchetes de valor arbitrario cubren separaciones y bases que no se ajustan a la escala de espaciado predeterminada), o un atributo de estilo en línea para un prototipo rápido o marcado seguro para correo. Cada valor se actualiza en el momento en que cambies una opción, y la vista previa del diseño se redibuja con él — sin pasos de compilación, sin CSS externo para cargar.
Todo se ejecuta localmente en tu navegador; nada de lo que configures aquí se envía a ningún lado. Cuando el CSS se vea correcto, cópialo, descárgalo como archivo .txt, o devuélvelo a la entrada para continuar iterando con otra herramienta.