Tutorial CSS: Propiedad 'display'

¿Qué es la propiedad display y para qué sirve en CSS?

La propiedad display en CSS es fundamental para el control del diseño y estructura de los documentos HTML. Define cómo se debe mostrar un elemento en el modelo de caja de CSS. Puede alterar significativamente la disposición visual y la relación espacial de los elementos dentro de un contenedor o a lo largo de una página web.

La propiedad display cuenta con varios valores que pueden cambiar un elemento de ser una simple línea de texto a un contenedor que gestione otros elementos, o incluso a una estructura de grilla compleja. En términos técnicos, display gobierna la generación de cajas de contenido y define el comportamiento de estas cajas en el contexto del flujo del documento.

Valores como block, inline, flex, y grid, entre otros, modifican la presentación y el comportamiento del flujo de los elementos respecto al contenido adyacente. Usando estos valores, podemos hacer que un elemento se comporte como un contenedor de bloque, una caja de línea, o incluso como parte de un diseño complejo de rejillas. Además, display puede combinar valores en configuraciones compuestas como inline-block, donde un elemento adquiere características tanto de elementos en línea como de bloque.

Para ilustrar cómo afecta la propiedad display a los elementos, consideremos algunos ejemplos simples:

/* Elemento como bloque */
div {
  display: block;
}

/* Elemento en línea */
span {
  display: inline;
}

/* Contenedor flexible */
section {
  display: flex;
}

/* Contenedor de rejilla */
article {
  display: grid;
}

/* Valor compuesto (bloque en línea) */
button {
  display: inline-block;
}

Al usar display adecuadamente, podemos construir layouts robustos y mantener el control sobre el comportamiento adaptativo y la alineación de los elementos, esenciales para el diseño responsivo. Es una de las propiedades más potentes y versátiles en CSS, permitiendo tanto controlar el flujo de documentos simples, como crear interfaces complejas y dinámicas.

Valores de display para elementos en bloque y línea

En CSS, los valores más básicos y fundamentales de la propiedad display son block y inline. Estos valores determinan si un elemento se mostrará como un bloque que ocupa todo el ancho disponible de su contenedor o como una caja en línea que sólo ocupa el espacio necesario.

display: block

Un elemento con display: block se comporta como un bloque de nivel superior. Ocupa todo el ancho disponible de su contenedor y comienza en una nueva línea. Ejemplos de elementos que por defecto tienen esta propiedad incluyen <div>, <h1>, <p>, <header>, <footer>, etc.

.block-element {
  display: block;
}

Características:

• Comienza en una nueva línea.
• Ocupa todo el ancho disponible.
• Respeta los márgenes y el padding tanto vertical como horizontal.

display: inline

Un elemento con display: inline se comporta como parte del flujo de texto. Sólo ocupa el espacio necesario para su contenido y no comienza en una nueva línea. Ejemplos de elementos que por defecto tienen esta propiedad incluyen <span>, <a>, <strong>, etc.

.inline-element {
  display: inline;
}

Características:

• No comienza en una nueva línea.
• Sólo ocupa el espacio necesario.
• Respeta los márgenes y el padding sólo horizontalmente, no verticalmente.

display: inline-block

El valor inline-block es una combinación de block e inline, donde el elemento se comporta como un inline pero puede aceptar las características de un block, como el margen y el padding vertical.

.inline-block-element {
  display: inline-block;

Características:

• No comienza en una nueva línea.
• Ocupa sólo el espacio necesario.
• Respeta los márgenes y el padding tanto vertical como horizontal.

Ejemplos prácticos

Ejemplo 1: Lista horizontal de navegación

Imagina que quieres crear una barra de navegación horizontal. Utilizarías display: inline o display: inline-block en los elementos de la lista (<li>):

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

Ejemplo 2: Botones alineados horizontalmente

Para alinear botones horizontalmente sin ocupar todo el ancho del contenedor:

<div class="button-container">
  <button class="btn">Aceptar</button>
  <button class="btn">Cancelar</button>
</div>

.button-container {
  text-align: center; /* Centra los botones */
}

.button-container .btn {
  display: inline-block;
  margin: 0 5px; /* Espaciado horizontal entre botones */
}

En resumen, los valores block y inline son esenciales para definir el comportamiento y disposición básica de cualquier elemento HTML dentro del diseño de una página web. Comprender estas diferencias y cómo aplicar combinaciones como inline-block es clave para construir layouts eficientes y estructurados en CSS.

Valores de display en Flexbox

display: flex es un valor de la propiedad display que activa el modelo Flexbox en un contenedor. Cuando un contenedor tiene display: flex, todos sus hijos directos se convierten en elementos flexibles (flex items), permitiendo un control avanzado sobre la alineación, dirección y distribución del espacio entre estos elementos.

Propiedades básicas de flex

Al aplicar display: flex, se habilitan varias propiedades adicionales que controlan la disposición de los elementos hijos:

• flex-direction: Define la dirección principal del contenedor flex. Puede ser:
  • row: Los elementos se disponen en una fila, de izquierda a derecha.
  • row-reverse: Los elementos se disponen en una fila, de derecha a izquierda.
  • column: Los elementos se disponen en una columna, de arriba a abajo.
  • column-reverse: Los elementos se disponen en una columna, de abajo a arriba.

.flex-container {
  display: flex;
  flex-direction: row;
}

• justify-content: Define cómo se distribuye el espacio entre los elementos a lo largo del eje principal.
  • flex-start: Los elementos se agrupan al inicio del contenedor.
  • flex-end: Los elementos se agrupan al final del contenedor.
  • center: Los elementos se centran a lo largo del eje principal.
  • space-between: Se crea un espacio uniforme entre los elementos.
  • space-around: Los espacios entre los elementos y los bordes son iguales.

.flex-container {
  display: flex;
  justify-content: space-between;
}

• align-items: Define cómo se alinean los elementos a lo largo del eje transversal del contenedor.
  • flex-start: Los elementos se alinean al inicio del eje transversal.
  • flex-end: Los elementos se alinean al final del eje transversal.
  • center: Los elementos se centran a lo largo del eje transversal.
  • baseline: Los elementos se alinean según su línea base textual.
  • stretch: Los elementos se estiran para llenar el contenedor.

.flex-container {
  display: flex;
  align-items: center;
}

• flex-wrap: Define si los elementos deben o no ajustarse (wrap) a una nueva línea si no caben en el contenedor.
  • nowrap: Los elementos no se ajustan, todos permanecen en una sola línea.
  • wrap: Los elementos se ajustan a una nueva línea si es necesario.
  • wrap-reverse: Igual que wrap, pero en dirección inversa.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Propiedades de los elementos flexibles

Además de las propiedades del contenedor flex, los elementos dentro de un contenedor flex también pueden tener propiedades específicas:

• flex-grow: Determina cómo se dividirá el espacio extra en el contenedor. Un valor mayor significa que el elemento crecerá más en comparación con otros.

.flex-item {
  flex-grow: 2; /* Este elemento crecerá el doble que los que tengan flex-grow: 1 */
}

• flex-shrink: Determina cómo se reducirá el tamaño del elemento si el espacio es insuficiente. Un valor mayor significa que el elemento se encogerá más.

.flex-item {
  flex-shrink: 1; /* Este elemento se encogerá menos que uno con flex-shrink: 2 */
}

• flex-basis: Define el tamaño inicial del elemento antes de distribuir el espacio restante.

.flex-item {
  flex-basis: 100px; /* Tamaño inicial del elemento */
}

• align-self: Permite sobreescribir la propiedad align-items del contenedor para un solo elemento.

.flex-item {
  align-self: center; /* Este elemento se centrará en el eje transversal */
}

Ejemplo práctico

Vamos a crear un layout simple con un contenedor flex y varios elementos flexibles. El contenedor tendrá una dirección de fila (row), los elementos estarán distribuidos uniformemente (space-around), y alineados al centro (center).

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 80vh;
  border: 1px solid #ccc;
}

.flex-item {
  flex-grow: 1;
  flex-basis: 100px; 
  flex-shrink: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #000;
}

Este código crea un contenedor flex que distribuye tres elementos de manera equitativa, proporcionándoles espacio adicional para crecer y centrando todos los elementos a lo largo del eje vertical.

Valores de display en grid

display: grid es un valor de la propiedad display que activa el modelo de rejilla (grid) en un contenedor. Este modelo permite la creación de diseños complejos con dos dimensiones (filas y columnas), gestionando de manera eficiente la disposición de los elementos hijos en un sistema de rejilla.

Al activar display: grid en un contenedor, se puede definir un número fijo o flexible de filas y columnas, así como el tamaño y la posición de los elementos en dicha rejilla.

Para crear una rejilla básica, se utilizan propiedades como grid-template-columns y grid-template-rows que especifican la estructura de la rejilla.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

En este ejemplo, grid-template-columns crea tres columnas de igual tamaño utilizando la fracción (fr), y grid-template-rows ajusta automáticamente las alturas de dos filas basadas en su contenido.

Elementos de la rejilla

Cada elemento hijo dentro de un contenedor display: grid puede colocarse en una o más celdas de la rejilla mediante propiedades como grid-column y grid-row.

.item-1 {
  grid-column: 1 / span 2; /* Ocupa dos columnas */
  grid-row: 1 / 2;         /* Ocupa la primera fila */
}

.item-2 {
  grid-column: 3 / 4;      /* Ocupa la tercera columna */
  grid-row: 1 / 3;         /* Ocupa dos filas empezando desde la primera */
}

Estas propiedades permiten un control detallado sobre la posición y el tamaño de los elementos en la rejilla.

Definición de áreas de la rejilla

Se pueden definir áreas de la rejilla mediante grid-template-areas. Esto proporciona una manera intuitiva de nombrar y organizar diferentes secciones de la rejilla.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Utilizando grid-area, se asignan nombres a las áreas definidas, haciendo que la disposición del diseño sea más clara y legible.

Propiedades adicionales de la rejilla

• gap: Define el espacio entre filas y columnas de la rejilla.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
}

• justify-items: Alinea los elementos a lo largo del eje horizontal dentro de sus celdas.

.container {
  display: grid;
  justify-items: center;
}

• align-items: Alinea los elementos a lo largo del eje vertical dentro de sus celdas.

.container {
  display: grid;
  align-items: center;
}

• justify-content: Alinea toda la rejilla dentro del contenedor a lo largo del eje horizontal.

.container {
  display: grid;
  justify-content: center;
}

• align-content: Alinea toda la rejilla dentro del contenedor a lo largo del eje vertical.

.container {
  display: grid;
  align-content: center;
}

Ejemplo práctico

Vamos a crear un diseño de página simple usando el modelo de Grid CSS. La página contendrá un encabezado, una barra lateral, una sección de contenido principal y un pie de página.

<div class="grid-container">
  <header class="header">Encabezado</header>
  <aside class="sidebar">Barra lateral</aside>
  <main class="content">Contenido principal</main>
  <footer class="footer">Pie de página</footer>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightcoral;
}

.content {
  grid-area: content;
  background-color: lightgoldenrodyellow;
}

.footer {
  grid-area: footer;
  background-color: lightgreen;
}

Este código divide la página en un encabezado, una barra lateral, una área de contenido principal y un pie de página, distribuidos de manera clara y organizada en una rejilla de dos filas y tres columnas.

Utilizando display: grid, se pueden gestionar layouts complejos con mayor flexibilidad y control sobre la disposición de los elementos, lo que es esencial para construir diseños responsivos y bien organizados.

Valores compuestos de display

Los valores compuestos de display permiten combinar propiedades y comportamientos de diferentes modelos de visualización en un solo valor. Esto facilita la creación de layouts que requieren características tanto de contenedores de bloques como de elementos en línea. A continuación, se describen algunos de los valores compuestos más comunes y su uso en CSS.

display: inline-block

inline-block combina las características de los elementos en línea (inline) y de los elementos de bloque (block). Los elementos con display: inline-block se colocan en línea junto a otros elementos en línea, pero permiten definir propiedades de bloques como el ancho, el alto, los márgenes y el padding.

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 100px;
  margin: 10px;
}

En este ejemplo, los elementos con clase .inline-block-element se alinean horizontalmente como elementos en línea pero mantienen las capacidades de estilo de un bloque.

display: inline-flex

inline-flex combina las características de elementos en línea con la flexibilidad de un contenedor flex. Un elemento con inline-flex se alinea horizontalmente con otros elementos en línea pero se comporta como un contenedor flex en su interior.

.inline-flex-container {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

En este caso, un contenedor con display: inline-flex permite a sus elementos hijos compartir el mismo conjunto de alineación y distribución espacial establecido por el modelo Flexbox, mientras permanece en línea con otros elementos en el flujo del documento.

display: inline-grid

inline-grid combina las características de los elementos en línea con la robustez de un contenedor de rejilla (grid). Un elemento con inline-grid se alinea como un elemento en línea, pero su contenido puede organizarse según las reglas de una rejilla CSS.

.inline-grid-container {
  display: inline-grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 15px;
}

En este diseño, el contenedor con display: inline-grid permite a los elementos hijos colocarse en una rejilla, pero sin romper el flujo en línea del documento.

display: run-in

run-in es un valor compuesto menos conocido que transforma un elemento en línea si se coloca antes de un elemento de bloque, o en un bloque si aparece después de otro bloque. Esta capacidad de adaptarse dinámicamente dentro de un flujo específico es útil en ciertas situaciones de diseño.

<div class="run-in-element">Texto de run-in</div>
<p>Texto de párrafo.</p>

.run-in-element {
  display: run-in;
}

En este ejemplo, el div con clase .run-in-element se comporta como en línea si se encuentra con un bloque posterior o como un bloque si se coloca antes de otro bloque.

Cada uno de estos valores compuestos proporciona herramientas adicionales al desarrollador para crear layouts más complejos y flexibles, manteniendo tanto la alineación de elementos en línea como las ventajosas propiedades de los contenedores de bloques, flexibles o de rejilla. El uso adecuado de estos valores permite optimizar el diseño y comportamiento de los elementos dentro de una página web, potenciando las capacidades del CSS para producir interfaces dinámicas y adaptativas.