Estructura · flex-col.css
Flex col (columnas flexibles)
Define cuántas columnas tiene un contenedor flex. QuicklyCSS reparte automáticamente sus hijos directos en fracciones iguales y permite cambiar la cantidad por breakpoint.
Columnas iguales
Reparte el ancho entre uno y doce hijos por fila.
Flex con wrap
.flex activa flexbox y permite que los items cambien de fila.
Responsive real
Modifica el número de columnas usando breakpoints basados en max-width.
Código + resultado
Ejemplos reales de flex col
Observa cómo el contenedor distribuye sus hijos directos en columnas iguales.
<div class="flex flex-col-2">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
<div class="flex flex-col-3">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
<div class="flex flex-col-4">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
<div class="flex flex-auto-fit">
<strong>Item fluido 1</strong>
<span>Item fluido 2</span>
</div>
<div class="flex flex-auto-fill">
<strong>Item automático 1</strong>
<span>Item automático 2</span>
</div>
<div class="flex flex-col-4 flex-col-768-1">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
Referencia
Clases flex-col
Las clases se aplican al contenedor y dimensionan todos sus hijos directos.
| Clase | Columnas | Ancho por hijo | Uso recomendado |
|---|---|---|---|
.flex | — | — | Activa flex con wrap. |
.flex-inline | — | — | Activa inline-flex con wrap. |
.flex-auto-fit | Automáticas | Mínimo 200px | Items fluidos que ocupan el espacio disponible. |
.flex-auto-fill | Automáticas | Mínimo 200px | Reserva tracks automáticos incluso sin contenido. |
.flex-col-1 | 1 | 100% | Una columna por fila. |
.flex-col-2 | 2 | 50% | Dos columnas iguales. |
.flex-col-3 | 3 | 33.333333% | Tres columnas iguales. |
.flex-col-4 | 4 | 25% | Cuatro columnas iguales. |
.flex-col-5 | 5 | 20% | Cinco columnas compactas. |
.flex-col-6 | 6 | 16.666667% | Seis columnas compactas. |
.flex-col-7 | 7 | 14.285714% | Siete divisiones iguales. |
.flex-col-8 | 8 | 12.5% | Ocho divisiones iguales. |
.flex-col-9 | 9 | 11.111111% | Nueve divisiones iguales. |
.flex-col-10 | 10 | 10% | Diez divisiones iguales. |
.flex-col-11 | 11 | 9.090909% | Once divisiones iguales. |
.flex-col-12 | 12 | 8.333333% | Retícula de doce columnas. |
.flex-col-640-[n] | 1–12 | 100% / n | Override para ≤640px. |
.flex-col-768-[n] | 1–12 | 100% / n | Override para ≤768px. |
.flex-col-1024-[n] | 1–12 | 100% / n | Override para ≤1024px. |
.flex-col-1280-[n] | 1–12 | 100% / n | Override para ≤1280px. |
.flex-col-1536-[n] | 1–12 | 100% / n | Override para ≤1536px. |
.flex-col-2560-[n] | 1–12 | 100% / n | Override para ≤2560px. |
.flex-col-3840-[n] | 1–12 | 100% / n | Override para ≤3840px. |
.flex-col-6016-[n] | 1–12 | 100% / n | Override para ≤6016px. |
Recomendaciones
Buenas prácticas con flex col
Configura el padre
Coloca .flex y .flex-col-n en el mismo contenedor.
Usa hijos directos
La regla sólo dimensiona el primer nivel de elementos descendientes.
Reduce columnas en móvil
Usa uno o dos overrides para conservar la legibilidad.
Separa con gap
Combina el layout con utilidades de separación sin cambiar su estructura.