# Display (flujo y visibilidad)

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

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

Estructura · display.css

Controla cómo participa cada elemento en el flujo del documento: bloque, línea, flex, grid, tabla, ocultamiento y utilidades accesibles.

v2.0

▤

## Flujo explícito
Declara block, inline, flex, grid o table sin escribir CSS adicional.

⌘

## Composición preparada
Activa el contexto correcto antes de aplicar los módulos de grid o flex.

◉

## Accesibilidad
Incluye helpers para contenido visualmente oculto que sigue siendo accesible.

i

## Problema que resuelve
Evita repetir declaraciones de `display` y `visibility` en componentes. Las utilidades hacen explícito el comportamiento estructural directamente en el marcado.

✦

## Convención real de clases
Usa clases como `.display-block`, `.display-flex`, `.display-grid`, `.display-none`, `.visible`, `.invisible` y `.sr-only`.

Código + resultado

## Ejemplos reales de display

Selecciona una utilidad para comparar el marcado con su resultado aplicado.

HTML

Resultado aplicado  display: block

viewport  comportamiento real

.display-block aplica display: block !important.

```html
<section class="display-block">
  <strong>Elemento de bloque</strong>
  <span>Ocupa el ancho disponible y comienza en una línea nueva.</span>
</section>
```

.display-flex activa display: flex. La dirección y alineación pertenecen a sus módulos específicos.

```html
<div class="display-flex">
  <strong>Contenedor flex</strong>
  <span>Activa un contexto flexible para organizar sus elementos hijos.</span>
</div>
```

.display-grid sólo activa el display. Las columnas se controlan desde grid-col.css.

```html
<div class="display-grid grid-col-2">
  <strong>Contenedor grid</strong>
  <span>Activa el contexto grid para combinarlo con las clases grid-col-* del framework.</span>
</div>
```

El resultado queda vacío porque .display-none retira completamente el elemento del flujo.

```html
<div class="display-none">
  <strong>Elemento oculto</strong>
  <span>El elemento deja de renderizarse y no conserva espacio en el layout.</span>
</div>
```

Referencia

## Clases de display

La tabla refleja las utilidades disponibles actualmente en `PRODUCCION/src/css/estructura/display.css`.

| Clase | Propiedad | Valor | Uso recomendado |
| --- | --- | --- | --- |
| .display-none | display | none | Retira el elemento y su espacio del layout. |
| .display-block | display | block | Elemento de bloque a ancho disponible. |
| .display-inline | display | inline | Contenido dentro del flujo de texto. |
| .display-inline-block | display | inline-block | Dimensiones de bloque dentro del flujo inline. |
| .display-flow-root | display | flow-root | Crea un nuevo contexto de formato de bloque. |
| .display-flex | display | flex | Activa un contenedor flexible. |
| .display-inline-flex | display | inline-flex | Flex que participa como elemento inline. |
| .display-grid | display | grid | Activa un contenedor grid. |
| .display-inline-grid | display | inline-grid | Grid que participa como elemento inline. |
| .display-table | display | table | Comportamiento visual de tabla. |
| .display-table-row | display | table-row | Comportamiento visual de fila. |
| .display-table-cell | display | table-cell | Comportamiento visual de celda. |
| .display-contents | display | contents | El wrapper no genera caja propia. |
| .visible | visibility | visible | Hace visible el elemento. |
| .invisible | visibility | hidden | Oculta conservando el espacio. |
| .visible-collapse | visibility | collapse | Colapsa filas o celdas de tabla. |
| .sr-only | helper | visualmente oculto | Contenido exclusivo para lectores de pantalla. |
| .sr-only-focusable | helper | visible al enfocar | Enlaces de salto y controles accesibles. |

Regla del sistema  Display define la participación en el layout. Grid, flex, separación y alineación se completan con los módulos correspondientes.

Recomendaciones

## Buenas prácticas con display

01
### Usa HTML semántico
La utilidad cambia la presentación, no el significado del elemento.

02
### Combina módulos
Activa grid o flex aquí y configura su estructura con el módulo especializado.

03
### Distingue ocultamiento
`display-none` elimina el espacio; `invisible` lo conserva.

04
### Protege accesibilidad
Usa `sr-only` cuando el contenido aún deba anunciarse.