Ejercicios/Ejemplos con la propiedad display
Sin poner la propiedad display
En este caso, vemos el ejemplo de como se comportarian los divs por defecto, si no les asignaramos ningun tipo de propiedad display
display: block:
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de block a la propiedad display
Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedor
display: inline
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de inline a la propiedad display
Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height
display: inline-block
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de inline-block a la propiedad display
combinacion de los dos anteriores. Se comporta como inline pero no ignora width o height
display: flex
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de flex a la propiedad display
Utiliza el modelo de cajas flexibles de css. Ideal para estructuras de 1 dimension
Recordemos que esta propiedad le aplicaremos a contenedores padre que tengan en su interior elementos que queramos posicionar u organizar
display: inline-flex
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de inline-flex a la propiedad display
version en linea (ocupa solo su contenido) del modelo de cajas flexibles de css.
Recordemos que esta propiedad le aplicaremos a contenedores padre que tengan en su interior elementos que queramos posicionar u organizar
display: grid;
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de grid a la propiedad display
utiliza cuadriculas o rejillas con el modelo de cajas Grid CSS.
display: inline-grid;
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de inline-grid a la propiedad display
la version en linea (ocupa solo su contenido) del modelo de cajas grid css.
display: list-item;
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de list-item a la propiedad display
Actua como un item de una lista. Es el comportamiento de etiquetas con li.
display: table; display; table-cell;
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de table a la propiedad display
Actúa como una tabla. Es el comportamiento de etiquetas como table.
En este caso, vemos el ejemplo de como se comportarían los divs si les asignáramos el valor de table-cell a la propiedad display
Actúa como una tabla. Es el comportamiento de etiquetas como table.
En este caso, vemos el ejemplo de como se comportarían los divs si les asignáramos el valor de table-row a la propiedad display Actúa como una tabla. Es el comportamiento de etiquetas como table.
display: contents;
En este caso, vemos el ejemplo de como se comportarian los divs si les asignamos el valor de contents a la propiedad display
Ignora la caja del elemento. Util para mantener Grid/Flex aun teniendo un wrapper intermedio.