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

Columnas Flexbox de igual ancho: generador CSS

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

Esta página abre el generador con flex-grow: 1 ya configurado en los tres cuadros de vista previa. Mírelos: en lugar de reducirse para ajustarse a su contenido, cada cuadro reclama una parte idéntica del espacio sobrante en la fila, que es la receta completa para columnas flexibles de igual ancho: sin anchos porcentuales, sin calc(), sin matemáticas de píxeles fijos para mantener la sincronización.

flex-grow: 1 le dice a un niño que crezca, y configurarlo en cada niño de la fila significa que todos crecen en la misma cantidad, por lo que terminan con el mismo ancho independientemente de cuántos haya o qué contenido se encuentre dentro de ellos. Agregue o elimine un cuadro con los controles a continuación y las columnas restantes se redistribuirán instantáneamente para permanecer iguales: cambie el tamaño de una ventana del navegador sobre este diseño en producción y se comportará de la misma manera.

Este es el patrón detrás de las cuadrículas de tarjetas de igual altura, las columnas de las tablas de precios y las secciones de pie de página divididas uniformemente. Dele más espacio a una columna elevando su crecimiento flexible por encima de las demás, o copie el bloque CSS a continuación exactamente como se generó para una división limpia e igual.

🛡️
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.