CSS

Explore

Display
Display

La propiedad display establece el tipo de visualización de los elementos HTML sin afectar el flujo normal de los elementos.

⁠

Existen etiquetas que por defecto su display ya está determinado, como la etiqueta <div> que tiene display block, <span> tiene display inline y <button> tiene display inline-block.

Visualización en bloque (block)

El display block establece que un elemento ocupará todo el espacio disponible por defecto y el siguiente elemento a este se situará por debajo.

Es posible añadir medidas de anchura width y altura height a estos a elementos.

También es posible agregar todas las propiedades del modelo de caja.

⁠

Ejemplo de display block⁠

⁠

Visualización en línea (inline)

El display inline establece que un elemento ocupará el espacio del contenido del mismo y el siguiente elemento se situará a la derecha.

No es posible añadir medidas de anchura width y altura height a estos a elementos.

También, no es posible agregar todas las propiedades del modelo de caja, únicamente funcionará la propiedad margin en el eje horizontal.

⁠

Ejemplo de display inline⁠

⁠

Visualización de bloque y línea (inline-block)

El display inline-block combina las ventajas de bloque de colocar medidas al elemento y propiedades del modelo de caja correctamente; con las ventajas de inline de color un elemento seguido de otro en el mismo espacio.

Si el elemento excede el contenido total, se coloca en la siguiente línea por debajo.

⁠

Ejemplo de display inline-block⁠

⁠

Visualización nula (none)

El display none desactiva la visualización de un elemento, como si el elemento no existiera.

⁠

Ejemplo de display none⁠

⁠

Flexbox y Grid

Para qué se usan CSS Grid y CSS Flexbox

Tanto CSS Grid como CSS Flexbox utilizan para ayudar a diseñar la estructura de una página web, aunque con diferencias entre ellas. Cada una tiene unas ventajas de uso según las características del proyecto que vayas a realizar y, según cada caso concreto, te interesará utilizar una o la otra. Veamos un poco más:

Qué es flexbox

Flexbox consiste en el ordenamiento de elementos hijos en un solo eje, por defecto horizontalmente. El elemento padre o contenedor deberá contener la propiedad display con el valor flex. A partir de aquí, ya puedes ordenar los hijos según sea necesario.

⁠

Ejemplo de flexbox⁠

⁠

⁠
`Más información`⁠
⁠

Qué es grid

Grid consiste en el ordenamiento de elementos hijos en dos ejes, como si fuera una cuadrícula o tabla. El elemento padre o contenedor deberá contener la propiedad display con el valor grid y debes definir las medidas de las columnas y de las filas. A partir de aquí, ya puedes ordenar los hijos según sea necesario.

⁠

Ejemplo de grid⁠

⁠

⁠
`Más información`⁠
⁠

CSS Grid y CSS Flexbox

Flexbox se introdujo por primera vez en el 2009 como un nuevo sistema de formateo, de manera que puedas construir páginas responsive y organizar tus elementos fácilmente sin necesidad de utilizar técnicas demasiado complejas

Por otro lado, Grid hizo su aparición con la idea de mejorar flex, y extender su uso más allá de barras horizontales y verticales de elementos, llegando incluso al maquetado completo de páginas web, con diseño responsive y con más fácil mantenimiento.

Diferencias entre CSS Grid y CSS Flexbox

La diferencia básica entre ambas está en que CSS Grid está basada en un formato de dos dimensiones, mientras que CSS Flexbox está basada en un formato de una sola dimensión.