Display

Especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento. En HTML, el valor de propiedad de visualización predeterminado se toma de las especificaciones HTML o de la hoja de estilo predeterminada del navegador/usuario.

display: block | inline | grid | flex | contens | table | none;

La propiedad se usa para cambiar el comportamiento de visualización predeterminado de los elementos HTML.

Es una propiedad muy importante en CSS para controlar el diseño. Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es block|inline.

Los elementos tipo block son: <h1>..<h6>, <p>, <div>, <li>, <form>, <header>, <footer> y <session>.

Se puede ocultar un elemento estableciendo con display: none. El elemento estará oculto y la página se mostrará como si el elemento no estuviera allí.

La propiedad es ignorada si esta presente float.

Block
inline
grid
flex
contens
table
..
..

1. Block

Un elemento a nivel de bloque SIEMPRE comienza en una nueva línea y ocupa todo el ancho disponible, es decir se extiende hacia la izquierda y hacia la derecha tanto como puede. Algunos elementos tipo block son: p, div, h1..h6, form, header, seccion, footer.

Un elemento en línea con display: block; no tiene permitido tener otros elementos de bloque dentro de él.

2. inline

Un elemento en línea NO comienza en una nueva línea y solo ocupa el ancho necesario. Algunos elementos tipo inline son: a, span, img.

Los elementos tipo inline son: <a>, <img> y <span>.

Parámetros de Display: inline
Parámetro	Descripción
inline-block	Muestra un elemento como un contenedor de bloques de nivel en línea. El elemento en sí tiene el formato de elemento en línea, pero puede aplicar valores de alto y ancho.
inline-flex	Muestra un elemento como un contenedor flexible de nivel en línea.
inline-grid	Muestra un elemento como un contenedor de cuadrícula de nivel en línea

3. grid

Contenedor de cuadricula a nivel de bloque. Grid está indicado para diseñar elementos en dos direcciones, de modo que estén alineados tanto horizontal como verticalmente.

display: grid;
grid-area: grid-row-start | grid-column-start | grid-row-end | grid-column-end | itemname;
grid-auto-columns: auto | max-content | min-content | length;
grid-auto-flow: row | column | dense | row dense | column dense;
grid-auto-rows: auto | max-content | min-content | length;
grid-column: grid-column-start | grid-column-end;
grid-column-end: auto | span n | column-line;
grid-column-gap: length;
grid-column-start: auto | span n | column-line;
grid-template: none | grid-template-rows | grid-template-columns | grid-template-areas | initial | inherit;
grid-gap: grid-row-gap | grid-column-gap;
grid-row: grid-row-start | grid-row-end;

4. flex

Contenedor flexible a nivel de bloque. Flex está indicado principalmente para diseñar elementos en una sola dirección (incluso si esos elementos cruzan líneas).

display: flex;
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
flex-flow: flex-direction flex-wrap | initial | inherit;
flex-grow: number | initial | inherit;
flex-shrink: number | initial | inherit;
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
flex: n | auto;

Es muy importante resetar <html> y <body>, ya que de no hacerlo ellos bloquearan el funcionamiento de <flex>.

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

Luego crear un contenedor y aplicarle alli el display: flex y flex-direccion. Finalmente cada elemento dentro del contenedor debe tener una proporción de tamaño con flex.

#cont {
	display: flex;
	flex-direction: column;     /* divide en vertical */
	//flex-direction: row;      /* divide en horizontal */
	height: 100%;
}
#uno {
	flex: 1;                /* toma el 50% */
	background-color: #ffc;
	border: 1px solid red;
}
#dos {
	flex: 1;                /* toma el 50% */
	background-color: #cff;
	border: 1px solid navy;
}

5. contens

Hace que el contenedor desaparezca, haciendo que los elementos secundarios sean hijos del elemento en el siguiente nivel en el DOM.

6. table

Hace que se comporte como tabla

display: table;
table-layout: auto | fixed | initial | inherit;

Parámetros de Display: table
Parámetro	Descripción
table-caption	Como elemento <caption>
table-column-group	Como elemento <colgroup>
table-header-group	Como elemento <col>
table-column	Como elemento <tr>
table-row	Como elemento <tr>
table-cel	Como elemento <td>
none	Ninguno, se oculta.

7. run-in

Muestra un elemento como bloque o en línea, según el contexto.

8. list-item

Deja que el elemento se comporte como un elemento <li>