Estructura · flex-col-span.css
Flex col span (12 columnas)
Distribuye elementos flex en una retícula de 12 columnas. Cada clase define cuánto ancho ocupa un item y permite sobrescribirlo en los breakpoints reales de QuicklyCSS.
Retícula de 12
Convierte cada span en una fracción predecible del ancho disponible.
Base flexible
Define simultáneamente flex-basis y max-width.
Overrides por breakpoint
Cambia la fracción desde 640 hasta 6016 píxeles mediante max-width.
Código + resultado
Ejemplos reales de flex span
Compara el código con el porcentaje que ocupa cada item dentro de un contenedor flex.
<div class="display-flex">
<article class="flex-span-3">
<strong>3 de 12 columnas</strong>
<span>Este item ocupa el 25% del contenedor flex.</span>
</article>
</div>
<div class="display-flex">
<article class="flex-span-6">
<strong>6 de 12 columnas</strong>
<span>Este item ocupa el 50% del contenedor flex.</span>
</article>
</div>
<div class="display-flex">
<article class="flex-span-9">
<strong>9 de 12 columnas</strong>
<span>Este item ocupa el 75% del contenedor flex.</span>
</article>
</div>
<div class="display-flex">
<article class="flex-span-6 flex-span-768-12">
<strong>6 columnas → 12 columnas</strong>
<span>Ocupa el 50% como base y el 100% cuando el viewport es igual o menor a 768px.</span>
</article>
</div>
Referencia
Clases flex-span
Cada unidad equivale a 100% / 12. Las variantes por breakpoint conservan la misma escala.
| Clase | Columnas | Ancho | Uso recomendado |
|---|---|---|---|
.flex-span-1 | 1/12 | 8.333333% | Indicadores o elementos mínimos. |
.flex-span-2 | 2/12 | 16.666667% | Controles compactos. |
.flex-span-3 | 3/12 | 25% | Cuatro columnas por fila. |
.flex-span-4 | 4/12 | 33.333333% | Tres columnas por fila. |
.flex-span-5 | 5/12 | 41.666667% | Composiciones asimétricas. |
.flex-span-6 | 6/12 | 50% | Dos columnas iguales. |
.flex-span-7 | 7/12 | 58.333333% | Contenido principal asimétrico. |
.flex-span-8 | 8/12 | 66.666667% | Contenido principal con sidebar. |
.flex-span-9 | 9/12 | 75% | Contenido amplio con lateral estrecho. |
.flex-span-10 | 10/12 | 83.333333% | Contenido casi completo. |
.flex-span-11 | 11/12 | 91.666667% | Margen estructural mínimo. |
.flex-span-12 | 12/12 | 100% | Fila completa. |
.flex-span-640-[n] | 1–12 | 8.33%–100% | Override para ≤640px. |
.flex-span-768-[n] | 1–12 | 8.33%–100% | Override para ≤768px. |
.flex-span-1024-[n] | 1–12 | 8.33%–100% | Override para ≤1024px. |
.flex-span-1280-[n] | 1–12 | 8.33%–100% | Override para ≤1280px. |
.flex-span-1536-[n] | 1–12 | 8.33%–100% | Override para ≤1536px. |
.flex-span-2560-[n] | 1–12 | 8.33%–100% | Override para ≤2560px. |
.flex-span-3840-[n] | 1–12 | 8.33%–100% | Override para ≤3840px. |
.flex-span-6016-[n] | 1–12 | 8.33%–100% | Override para ≤6016px. |
Recomendaciones
Buenas prácticas con flex span
Activa flex en el padre
Las clases span están diseñadas para items dentro de un contenedor flex.
Suma doce
En filas completas, procura que las fracciones principales sumen doce columnas.
Define pocos overrides
Una base y uno o dos breakpoints suelen cubrir el comportamiento necesario.
Controla el espacio aparte
Usa el módulo gap para separar items sin alterar sus porcentajes.