Módulo 4: Layout & Display. Flexbox, Grid. RWD

Es la configuración de visualización predeterminada para la mayoría de los elementos. Cada elemento de bloque comienza en una nueva línea y ocupa todo el ancho de su elemento padre, a menos que se establezca un ancho personalizado.
Independientemente de su ancho, cada elemento de bloque empujará el siguiente elemento a una nueva línea. Para colocar elementos uno al lado del otro, selecciona una configuración de diseño diferente (inline-block por ejemplo).

Los elementos con un Flex Layout organizan a sus hijos directos horizontal o verticalmente.
Puedes personalizar cómo se apilan los hijos directos, cuándo se envuelven, cómo se alinean y justifican dentro del contenedor flexible.
Cuando creas un Flex container, todos los hijos directos de ese elemento padre se convierten en Flex children. Puedes configurar también los Flex children.

En Grid se organizan los hijos directos en múltiples columnas y filas.
Puedes personalizar cómo se colocan, alinean y distribuyen los elementos secundarios directos dentro de los componentes de la cuadrícula: el contenedor, las celdas individuales, el grupo de celdas o las pistas.
En Grid puedes especificar espacios entre columnas y filas, lo que se conoce como pistas (tracks). También puedes utilizar la unidad FR para crear diseños de cuadrícula completamente fluidos.

Los elementos de bloques en línea se apilan uno al lado del otro y su ancho está determinado por el contenido del interior.
‍
Los elementos de bloque en línea también se ajustarán cuando el contenido alcance el límite del elemento principal. En el panel Estilos, puedes aplicar configuraciones específicas de ancho, alto, relleno y margen a los elementos de bloque en línea.

Inline es la configuración de visualización predeterminada para cualquier contenido de texto dentro de un elemento. Puedes cambiar el diseño de un elemento en línea cambiando sus márgenes y relleno, pero no puede cambiar su ancho o alto.

Para ocultar un elemento por completo, establece su configuración de visualización en none.
Esto es habitual por ejemplo para esconder elementos en algunas resoluciones.

Cada elemento tiene una posición estática de forma predeterminada, por lo que el elemento se adherirá al document flow. Los elementos con posicionamiento estático aparecen en el orden en que están apilados. Sin el estilo agregado, no se superpondrán y los diferentes elementos no tendrán diferentes valores predeterminados. La única razón para establecer un elemento en estático es eliminar el posicionamiento que se le aplica.

Un elemento con posicionamiento relativo se coloca en relación a su posición normal. Una configuración relativa sin otros atributos de posicionamiento agregados (arriba, izquierda, abajo o derecha) no se verá afectada. Esto se debe a que es relativo a sí mismo exactamente como si fuera estático. Establecer las propiedades superior, derecha, inferior e izquierda de un elemento relativo lo alejarán de su posición normal.

Para sacar un elemento del document flow, la posición absoluta es una gran opción. La posición de un elemento absoluto no se ve afectada por otros elementos y no afecta la posición de otros elementos.De forma predeterminada, la posición del elemento es relativa al body, pero puedes colocar cualquier elemento absoluto dentro de un elemento si ese padre está configurado en cualquier display position que no sea static.

Los elementos fijos se colocan en relación a la ventana del navegador.
Cuando te desplazas hacia abajo en la página, los elementos fijos permanecen fijos en sus posiciones. Esta configuración de posición se utiliza a menudo para navegaciones fijas (menús, footers, avisos de cookies).

Un elemento Sticky es relativo al flujo del documento hasta que se alcanza una posición de desplazamiento definida. En ese momento, cambia al comportamiento de un elemento fijo dentro de su padre directo. Una vez que el elemento sticky llegue a la parte inferior de su padre, dejará de desplazarse.