# Alignment (alineación)

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

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

Utilidades · Layout

Controla texto, ejes de flex, contenido de grid y elementos individuales mediante familias explícitas y variantes responsivas.

v2.0

↔

## Flex explícito
`.flex-*` distribuye el eje principal y `.items-*` controla el transversal.

⊞

## Grid en dos niveles
`.grid-*` mueve el conjunto y `.grid-items-*` alinea sus elementos.

9

## Nueve breakpoints
Las familias principales admiten variantes desde 640px hasta 6016px.

i

## Contexto antes que clase
Las utilidades modifican propiedades de alineación, pero no activan el layout. El contenedor debe ser flex o grid mediante `.display-flex` o `.display-grid`.

Código + resultado

## Compara modos de alineación

Selecciona una composición para ver qué eje y qué conjunto de elementos modifica.

HTML

Resultado aplicado  Flex · start

Ejes del contenedor

A  B  C

.flex-start modifica justify-content y mantiene los elementos al inicio del eje principal.

```html
<div class="display-flex flex-start items-center">
  <span>A</span><span>B</span><span>C</span>
</div>
```

.flex-center centra el grupo sobre el eje principal; .items-center lo centra sobre el eje transversal.

```html
<div class="display-flex flex-center items-center">
  <span>A</span><span>B</span><span>C</span>
</div>
```

.flex-between coloca el primer y último elemento en los extremos y distribuye el espacio restante.

```html
<div class="display-flex flex-between items-center">
  <span>A</span><span>B</span><span>C</span>
</div>
```

.grid-center centra el conjunto de pistas; .grid-items-center alinea cada elemento dentro de su celda.

```html
<div class="display-grid grid-center grid-items-center">
  <span>A</span><span>B</span><span>C</span>
</div>
```

.place-center aplica place-content y place-items; es el atajo más compacto para centrar un grid en ambos ejes.

```html
<div class="display-grid place-center">
  <span>A</span><span>B</span><span>C</span>
</div>
```

Mapa del sistema

## Siete familias de alineación

Primero identifica el contexto y después decide si quieres mover el grupo completo, todos sus hijos o un único elemento.

¿Es texto?  Usa `.text-*`

¿Es un contenedor flex?  Usa `.flex-*` o `.items-*`

¿Es un contenedor grid?  Usa `.grid-*`, `.grid-items-*` o `.place-*`

### Texto

`.text-*` Horizontal

#### Las líneas de texto

Se aplica en
Elemento que contiene el texto

Propiedad
`text-align`

Ejemplo
`.text-center`

Opciones:  left · center · right · justify

### Flex

`.flex-*` Eje principal

#### El grupo completo de hijos

Se aplica en
Contenedor flex

Propiedad
`justify-content`

Ejemplo
`.flex-between`

Opciones:  start · center · end · between · around · evenly

`.items-*` Eje transversal

#### Todos los hijos

Se aplica en
Contenedor flex

Propiedad
`align-items`

Ejemplo
`.items-center`

Opciones:  start · center · end · stretch

`.self-*` Eje transversal

#### Un único hijo

Se aplica en
Elemento hijo

Propiedad
`align-self`

Ejemplo
`.self-end`

Opciones:  start · center · end · stretch

### Grid

`.grid-*` Ambos ejes

#### El conjunto de pistas

Se aplica en
Contenedor grid

Propiedad
`justify-content + align-content`

Ejemplo
`.grid-center`

Opciones:  start · center · end · between · around · evenly

`.grid-items-*` Eje de bloque

#### Los elementos de todas las celdas

Se aplica en
Contenedor grid

Propiedad
`align-items`

Ejemplo
`.grid-items-center`

Opciones:  start · center · end · stretch

`.place-*` Ambos ejes

#### Contenido y elementos a la vez

Se aplica en
Contenedor grid

Propiedad
`place-content + place-items`

Ejemplo
`.place-center`

Opciones:  start · center · end

Variantes responsivas

## Nueve puntos de activación

El breakpoint se inserta entre la familia y el valor: `.flex-768-center` o `.grid-items-1280-end`.

`640` min-width  .flex-640-center

`768` min-width  .flex-768-center

`1024` min-width  .flex-1024-center

`1280` min-width  .flex-1280-center

`1536` min-width  .flex-1536-center

`1920` min-width  .flex-1920-center

`2560` min-width  .flex-2560-center

`3840` min-width  .flex-3840-center

`6016` min-width  .flex-6016-center

Excepción  Las clases `.place-start`, `.place-center` y `.place-end` sólo existen como variantes base en el CSS actual.

Referencia

## Clases disponibles
Las variantes responsivas repiten los mismos valores de cada familia en los nueve breakpoints.

| Clases | Propiedad | Valores | Contexto |
| --- | --- | --- | --- |
| .text-{valor} | text-align | left, center, right, justify | Cualquier bloque de texto. |
| .flex-{valor} | justify-content | start, center, end, between, around, evenly | Contenedor flex. |
| .items-{valor} | align-items | start, center, end, stretch | Contenedor flex. |
| .self-{valor} | align-self | start, center, end, stretch | Hijo de flex o grid. |
| .grid-{valor} | justify-content + align-content | start, center, end, between, around, evenly | Contenedor grid. |
| .grid-items-{valor} | align-items | start, center, end, stretch | Contenedor grid. |
| .place-{valor} | place-content + place-items | start, center, end | Principalmente grid. |

Recomendaciones

## Buenas prácticas de alineación

01
### Activa el layout
Una clase de alineación no cambia por sí sola el elemento a flex o grid.

02
### Identifica el eje
En flex, usa `.flex-*` para el eje principal y `.items-*` para el transversal.

03
### Usa self con criterio
Reserva `.self-*` para excepciones puntuales dentro de un conjunto alineado.

04
### Responsive progresivo
Define primero el comportamiento móvil y sobrescríbelo sólo en los breakpoints necesarios.