# Flex col (columnas flexibles)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/flex-col.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Estructura · flex-col.css

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.

v2.0

▥

## 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`.

i

## Problema que resuelve
Evita asignar manualmente porcentajes a cada hijo. El contenedor declara el número de columnas y todos sus elementos directos reciben la fracción correspondiente.

✦

## Convención real de clases
Combina `.flex` o `.flex-inline` con `.flex-col-{n}`. Para adaptar el layout usa `.flex-col-{breakpoint}-{n}`.

Código + resultado

## Ejemplos reales de flex col

Observa cómo el contenedor distribuye sus hijos directos en columnas iguales.

HTML

Resultado aplicado  2 columnas

contenedor flex  hijos directos

.flex-col-2 asigna el 50% a cada hijo directo.

```html
<div class="flex flex-col-2">
  <strong>Columna 1</strong>
  <span>Columna 2</span>
</div>
```

.flex-col-3 asigna un tercio del ancho a cada hijo directo. El espacio restante corresponde a la tercera columna disponible.

```html
<div class="flex flex-col-3">
  <strong>Columna 1</strong>
  <span>Columna 2</span>
</div>
```

.flex-col-4 asigna el 25% a cada hijo directo. El contenedor admite cuatro items por fila.

```html
<div class="flex flex-col-4">
  <strong>Columna 1</strong>
  <span>Columna 2</span>
</div>
```

.flex-auto-fit permite que cada hijo crezca, se reduzca y parta de una base de 200px.

```html
<div class="flex flex-auto-fit">
  <strong>Item fluido 1</strong>
  <span>Item fluido 2</span>
</div>
```

En la implementación actual, .flex-auto-fill comparte el mismo comportamiento flex: 1 1 200px de .flex-auto-fit.

```html
<div class="flex flex-auto-fill">
  <strong>Item automático 1</strong>
  <span>Item automático 2</span>
</div>
```

La composición cambia de cuatro columnas a una cuando el viewport es igual o menor a 768px.

```html
<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. |

Regla del sistema  El número de columnas vive en el contenedor. Los hijos directos reciben flex-basis y max-width calculados como 100% / n.

Recomendaciones

## Buenas prácticas con flex col

01
### Configura el padre
Coloca `.flex` y `.flex-col-n` en el mismo contenedor.

02
### Usa hijos directos
La regla sólo dimensiona el primer nivel de elementos descendientes.

03
### Reduce columnas en móvil
Usa uno o dos overrides para conservar la legibilidad.

04
### Separa con gap
Combina el layout con utilidades de separación sin cambiar su estructura.