Estructura · display.css
Display (flujo y visibilidad)
Controla cómo participa cada elemento en el flujo del documento: bloque, línea, flex, grid, tabla, ocultamiento y utilidades accesibles.
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.
Código + resultado
Ejemplos reales de display
Selecciona una utilidad para comparar el marcado con su resultado aplicado.
<section class="display-block">
<strong>Elemento de bloque</strong>
<span>Ocupa el ancho disponible y comienza en una línea nueva.</span>
</section>
<div class="display-flex">
<strong>Contenedor flex</strong>
<span>Activa un contexto flexible para organizar sus elementos hijos.</span>
</div>
<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>
<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. |
Recomendaciones
Buenas prácticas con display
Usa HTML semántico
La utilidad cambia la presentación, no el significado del elemento.
Combina módulos
Activa grid o flex aquí y configura su estructura con el módulo especializado.
Distingue ocultamiento
display-none elimina el espacio; invisible lo conserva.
Protege accesibilidad
Usa sr-only cuando el contenido aún deba anunciarse.