⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador CSS Flexbox

Cree visualmente un diseño de caja flexible CSS: dirección flexible, justificación de contenido, alineación de elementos, envoltura flexible y espacio en el contenedor, además de crecimiento flexible, reducción flexible y base flexible por niño, todo con una vista previa en vivo y CSS copiable.

Procesando... 0%

Resultado

Un diseño de flexbox tiene dos libros de reglas separados: propiedades en el contenedor (flex-direction, justify-content, align-items, flex-wrap, gap) y propiedades en cada elemento secundario (flex-grow, flex-shrink, flex-basis) y mezclarlas es la fuente más común de errores de "¿por qué no se centra/crece/envuelve como esperaba?". Este generador muestra ambos libros de reglas en la pantalla a la vez: cambie cualquier control de contenedor o los campos propios de cualquier niño y tres cuadros numerados y codificados por colores se actualizan inmediatamente, para que la causa y el efecto permanezcan visibles.

El lado del contenedor cubre todos los ejes del diseño: elija una dirección, elija cómo se distribuyen los elementos secundarios a lo largo del eje principal con justificación de contenido, alinéelos en el eje transversal, decida si se ajustan a nuevas líneas y establezca un espacio en lugar de márgenes entre ellos. El lado secundario es igual de real: agregue cuadros hasta ocho, elimine hasta dos y proporcione a cualquiera de ellos su propio flex-grow, flex-shrink y flex-basis; el generador solo imprime una regla CSS por niño cuando al menos una de ellas difiere del valor predeterminado del navegador, por lo que el código copiado nunca se rellena con flex-grow: 0 en cuadros que no lo necesitan.

Las páginas preestablecidas saltan directamente a los diseños que la gente realmente busca por nombre: cómo centrar un div (la pregunta de diseño CSS más frecuente, resuelta con justificar contenido y alinear elementos ambos configurados en el centro), un logotipo, enlaces izquierdos, barra de navegación derecha, columnas flexibles de igual ancho a través de flex-grow y una comparación lado a lado del espacio entre con sus parientes cercanos, el espacio alrededor y el espacio uniforme.

Como todas las herramientas de este sitio, el generador es gratuito y se ejecuta completamente en su navegador: sin carga, sin cuenta, y sigue funcionando sin conexión una vez que se carga la página.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Controles de contenedor: dirección flexible, justificación de contenido, alineación de elementos, envoltura flexible y entrada de espacio en píxeles, aplicados en vivo a la vista previa.
  • Tres cuadros secundarios codificados por colores de forma predeterminada (agregue hasta ocho, elimine hasta dos), cada uno con sus propios campos flex-grow, flex-shrink y flex-basis.
  • Bloque CSS copiable con una regla .flex-container más una regla .flex-item-N por hijo que tiene propiedades flexibles no predeterminadas.

Beneficios clave

✓ Cada control de contenedor y flex-grow, flex-shrink y flex-basis de cada niño actualizan en vivo tres cuadros de vista previa numerados, para que pueda ver exactamente lo que hacen sus reglas de flexbox antes de tocar una hoja de estilo.
✓ El generador solo imprime reglas secundarias que realmente difieren de los valores predeterminados de CSS, por lo que el código copiado permanece breve y legible en lugar de volver a expresar flex-grow: 0 en cada cuadro.
✓ Las páginas preestablecidas resuelven los diseños que la gente busca por nombre: centrar un div, un logotipo, enlaces izquierdos, barra de navegación derecha y columnas flexibles de igual ancho; abra una y la herramienta ya estará configurada.

Casos de uso

  • • Obtenga el CSS exacto para centrar un div tanto horizontal como verticalmente observando cómo justificar contenido y alinear elementos funcionan en cuadros de vista previa en vivo.
  • • Cree un diseño de barra de navegación con logotipo izquierdo y enlaces derecho con espacio entre elementos y alineación de elementos: centro, luego copie el CSS del contenedor directamente en su componente de encabezado.
  • • Compare el espacio entre, el espacio alrededor y el espacio uniformemente uno al lado del otro en los mismos tres cuadros en lugar de adivinar cuál coincide con el espacio que desea.