Aunque la propiedad display existe desde hace años, en versiones modernas de CSS la forma recomendada de utilizar display es mediante el formato multi-keyword (con dos valores). De esta forma, tendremos mayor control sobre el tipo de layout que vamos a crear.
Si nunca has utilizado esta propiedad o estás empezando con CSS, te aconsejo leer primero el artículo sobre la propiedad
displayde CSS tradicional, donde explicamos sus bases. Luego, vuelve aquí.
La propiedad display multi-keyword
Cuando usamos el formato de dos valores en display:
- 1️⃣ El primer valor (contexto externo) define el flujo del elemento respecto a su padre.
- 2️⃣ El segundo valor (contexto interno) define el flujo del elemento respecto a sus hijos.
Observa que, en la imagen anterior, se define los cambios que hacemos al usar display. El primer valor va a definir el comportamiento del propio elemento (en la imagen, en gris) con el resto del documento. El segundo valor, sin embargo, va a definir el comportamiento de sus elementos hijos (en la imagen, los morados).
Valores múltiples de display
Ahora que sabemos que podemos establecer dos valores para la propiedad display, veamos qué opciones tenemos, teniendo en cuenta que tenemos un primer valor (contexto externo) y un segundo valor (contexto interno) a indicar.
Comportamiento respecto al padre
Como hemos dicho, el primer valor indicado en la propiedad display es la orientación en el flujo del documento, es decir, como se comporta nuestro elemento respecto a su elemento padre.
Este valor puede ser uno de los dos siguientes:
| Valor | Denominación | Significado | Ejemplo |
|---|---|---|---|
inline | Elemento en línea | Ocupa sólo el espacio necesario. Ignora tamaños. Se alinea uno tras otro. | <span> |
block | Elemento en bloque | Ocupa todo el espacio disponible. Obedece tamaños. Se apila uno encima de otro. | <div> |
Como se menciona en la tabla anterior, por defecto, todos los elementos <div> se comportan como elementos en bloque (block) y todos los elementos <span> se comportan como elementos en línea (inline).
Es importante tener en cuenta que cada etiqueta HTML tiene por defecto uno de estos valores. Esto, habitualmente, se suele denominar el tipo de caja del elemento. Si no sabes nada sobre esto, te aconsejo echarle un vistazo antes al apartado Modelo de cajas.
Comportamiento de los hijos
Por otro lado, el segundo valor indicado en la propiedad display define el comportamiento que van a tener los elementos hijos (los elementos internos).
Este valor suele ser uno de los siguientes:
| Valor | Descripción | Más info |
|---|---|---|
flow | Los elementos hijos siguen el modelo de flujo estándar de CSS. | - |
flow-root | Idem al anterior, pero crea un contenedor en formato block (aislamiento). | |
flex | Los elementos hijos se organizan según el modelo Flexbox de CSS. | Ver Flex |
grid | Los elementos hijos se organizan según el modelo Grid de CSS. | Ver Grid |
Ten en cuenta que cada uno de estos valores se acompaña con el primer valor de la propiedad display, que puede ser tanto inline como block. Existen otros valores más, pero de momento vamos a centrarnos en estos, que son los más habituales.
Recuerda que en este artículo estamos explicando el formato multi-keyword de la propiedad display, el recomendado usar hoy en día. Aún así, hoy en día está muy extendido el formato simple de display, donde solo establecemos un valor como parámetro. Aunque esta modalidad simple se considera legacy, aún se puede utilizar y es muy común que te encuentres con ella. Poco a poco será reemplazada por este nuevo formato multi-keyword de dos valores.
Ejemplos de uso de display
Veamos algunos ejemplos en acción de la propiedad display para entender como definir elementos. Observa los valores que establecemos:
- 1️⃣
block flow(azules): Ocupan todo el ancho, obedecen tamaños y se apilan en vertical. - 2️⃣
inline flow(rojos): Ocupan su contenido, ignoran tamaños y se alinean en horizontal. - 3️⃣
inline flow-root(morados): Idem a azules, pero obedecen tamaños. Crean contexto de bloque.
div {
color: white;
margin: 1px;
}
/* Formato de bloque, por defecto en <div> */
.block {
background: darkblue;
/* display: block flow; (Por omisión) */
}
/* Formato en línea, por defecto en <span> */
.inline {
background: darkred;
display: inline flow;
width: 200px;
}
/* Formato híbrido de los dos anteriores */
.flow-root {
background: indigo;
display: inline flow-root;
width: 200px;
}
<div class="block">Elemento 1</div>
<div class="block">Elemento 2</div>
<div class="inline">Elemento 3</div>
<div class="inline">Elemento 4</div>
<div class="flow-root">Elemento 5</div>
<div class="flow-root">Elemento 6</div>
Cómo puedes ver, los elementos azules ocupan todo el ancho disponible y se apilan uno encima de otro. Aunque no se puede ver, si se le modificara el tamaño, obedecerían.
Por otro lado, los elementos rojos ocupan sólo el tamaño necesario de su contenido, ignoran los tamaños (aunque se le indiquen) y se alinean uno tras otro.
Los elementos morados funcionan igual que los rojos, salvo que si se le indica un tamaño, no lo ignora, sino que lo obedecen, puesto que se ha creado un contexto de bloque alrededor de ellos.
Equivalencias con el display tradicional
Como hemos mencionado, el display multi-keyword es la nueva modalidad de uso, que se prefiere sobre el formato tradicional de un solo valor de display. Si utilizabas este formato tradicional, te indico a continuación (en comentarios) cuales serían las versiones equivalentes en ese modelo clásico:
.element {
display: inline flow; /* Equivale a display: inline */
display: block flow; /* Equivale a display: block */
display: inline flex; /* Equivale a display: inline-flex */
display: block flex; /* Equivale a display: flex */
display: inline grid; /* Equivale a display: inline-grid */
display: block grid; /* Equivale a display: grid */
display: none; /* Equivale a display: none (igual) */
display: contents; /* Equivale a display: contents (igual) */
}
Por aquí puedes echar un vistazo a la explicación de la propiedad display tradicional.
