La propiedad display de CSS es una de las más importantes y versátiles cuando trabajamos con un diseño web. Nos da la posibilidad de controlar la colocación de los elementos HTML en una página web, afectando tanto su disposición como su comportamiento dentro del flujo del documento.
Para un maquetador web entender cómo funciona display es esencial, porque le permitirá crear webs complejas y adaptables a diferentes resoluciones de pantalla.
Valores de la propiedad display
A continuación vamos a ver los valores que podemos aplicar a la propiedad display, con una breve explicación y un ejemplo de uso para cada uno. Es importante comentar también que la propiedad display de un elemento puede ser sobrescrita por sus hijos, por lo que es recomendable tenerlo en cuenta a la hora de anidar los estilos en la estructura de una web.
Valor display: block
Cuando aplicamos la propiedad display: block a un elemento, éste ocupará todo el ancho disponible de su contenedor padre y el siguiente comenzará en una nueva línea. Este es el valor por defecto de muchos elementos HTML como pueden ser un div, p o h1. Normalmente lo usaremos cuando queramos trabajar a modo de bloques unos encima de otros.
.elemento-block {
display: block;
}<h1 class="elemento-block">Se comportará como un elemento en bloque</h1>
<div class="elemento-block">Se comportará como un elemento en bloque</div>Valor display: inline
Los elementos que tienen aplicado el valor display: inline sólo ocupan el ancho necesario y no les afecta la propiedad height o width. Tampoco comenzarán en una nueva línea sino que continuará al lado de otro elemento. Se trata del valor por defecto de elementos como a o span, que se usan integrados en un contexto de disposición en línea normalmente. Por este motivo es útil para crear menús de navegación o listado de iconos, por ejemplo.
.elemento-inline {
display: inline;
}<span class="elemento-inline">Se comportará como un elemento en línea</span>
<a class="elemento-inline">Se comportará como un elemento en línea</a>Valor display: inline-block
El valor display: inline-block es una combinación de las características de los valores block e inline. Por un lado permite definir el tamaño del elemento con las propiedades width y height, pero no forzará un salto de línea. Es el valor por defecto por ejemplo de img o los button y select de los formularios.
.elemento-inline-block {
display: inline-block;
}<div class="elemento-inline-block">Se comportará como un elemento en línea y bloque</div>
<div class="elemento-inline-block">Se comportará como un elemento en línea y bloque</div>Valor display: none
Con display: none podemos eliminar completamente un elemento del flujo del documento y no ocupará espacio. Esto es útil cuando estamos ajustando el diseño para dispositivos móviles, ya que nos permite ocultar completamente un elemento que no nos interese mostrar a partir de determinadas resoluciones. No es la única propiedad que permite hacerlo, de modo que te invito a conocer la diferencia entre display: none y visibility: hidden, te será de gran utilidad para saber cuándo debes emplear cada una.
.elemento-none {
display: none;
}<article class="elemento-none">Se ocultará</article>Valor display: flex
La propiedad display: flex forma parte de lo que se conoce habitualmente como flexbox. Permite que los hijos dentro de un elemento que hará las veces de contenedor se distribuyan de manera flexible. Es decir, podemos distribuir los elementos hijos de manera horizontal o vertical sencillamente. El contenedor al que apliquemos este valor se comportará como un elemento en bloque ocupando el ancho disponible.
.elemento-flex {
display: flex;
}<div class="elemento-flex">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>Valor display: inline-flex
Parte también del sistema flexbox, el valor display: inline-flex es similar a display: flex, los hijos se distribuirán de manera flexible. Sin embargo el contenedor se comportará como un elemento en línea ocupando sólo es espacio necesario, permitiendo situar diferentes bloques uno al lado del otro. Esta propiedad tiene muy variadas aplicaciones, pero nos sirve para agrupar elementos por bloque que deben verse en una misma línea, como podría ser un listado de categorías agrupadas por diferentes temas.
.elemento-inline-flex {
display: inline-flex;
}<div class="elemento-inline-flex">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>Tanto la propiedad display: flex como display: inline-flex se usan de manera conjunta con otras propiedades específicas que nos permiten manipular cosas como la orientación del flujo o el espaciado. Sin embargo el sistema flexbox es un tema que requiere más espacio para tratarlo detenidamente, ya que su funcionamiento puede ser difícil de entender al comienzo. Más adelante crearé un artículo específico para ello, pero mientras tanto te dejo al pie un artículo por si quieres profundizar más.
Valor display: table
Usando la propiedad display: table podemos emular el comportamiento de una tabla HTML pero a través de CSS. En el interior trabajaremos con filas y columnas de un modo similar a como lo haríamos del modo tradicional. Para ello usaremos los valores display: table-row para las filas y display: table-cell para las columnas. Las tablas son útiles para mostrar datos estructurados, manteniendo la coherencia en la lectura.
.elemento-table {
display: table;
}
.elemento-table-row {
display: table-row;
}
.elemento-table-cell {
display: table-cell;
}<div class="elemento-table">
<div class="elemento-table-row">
<div class="elemento-table-cell">Celda 1</div>
<div class="elemento-table-cell">Celda 2</div>
</div>
</div>Valor display: grid
Con display: grid se puede convertir un contenedor en una cuadrícula. Básicamente funciona de un modo similar a una tabla con filas y columnas, pero es mucho más versátil porque no es necesario estructurar el contenido dentro de HTML como en el caso anterior físicamente sino que todo lo controlaremos directamente desde CSS. De este modo usaremos las propiedades grid-template-columns y grid-template-rows para definir cuántas columnas y filas queremos.
.elemento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}<section class="elemento-grid">
<article>Elemento 1</article>
<article>Elemento 2</article>
<article>Elemento 3</article>
<article>Elemento 4</article>
<article>Elemento 5</article>
<article>Elemento 6</article>
</section>En resumen, la propiedad display de CSS es imprescindible para controlar cómo se mostrará un elemento en pantalla. Dominar su uso permitirá a un maquetador web trabajar con desarrollos web complejos y prever el comportamiento de los elementos en los diferentes dispositivos.
Referencias:
- Modos de disposición en caja: la propiedad «display» (inglés) – W3C
- Una guía completa de flexbox (inglés) – CSS-Tricks
Deja una respuesta