Clase 5: Diagramación

Grilla CSS

Permite diagramar en dos dimensiones, independiente del orden en que se encuentra el contenido.
En la cascada de estilos, al contenedor se le da la propiedad de display: grid.

Algunas características:

• (colum/row)-gap= distancia de los elementos dentro de la grilla. Modifica el margen.
• Se puede definir una grilla identificando líneas

• Unidad fr= representa una fracción del espacio restante en el contedor de grilla.
• Se pueden definir las posiciones de cada elementos dentro de la grilla.

*1rem= 16px

Posiciones

Se puede determinar la posición de un objeto. Predeterminadamente, todos los elementos tienen la misma posición.

• position: static; --} Se mantiene en su posición original del flujo normal del documento.
• position: relative; --} El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a sí mismo. Es decir, muevo el elemento pero su "espacio" original se mantiene. Es util para alinear elementos como logos o títulos, pues a veces la propiedad margin-top mueve todos los elementos. Con posición relativa sólo se movera el elemento seleccionado.
• position: absolute; --} El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es decir, el elemento sale de su posición natural del flujo y pasa a una capa superior.
• position: sticky; --} El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a su ancestro que se desplace más cercano. El elemento obedece al scroll.
• position: fixed; --} El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es similiar a sticky pero no tiene una posición en el flujo.

*Las coordenadas dadas (top, left, right, bottom), van a ser tomadas desde el elemento padre, por lo tanto, si su contenedor tiene declarada una posición, está será aplicada en los elementos hijos a menos que se especifique una posición particular a estos.
*Al ser contenedores div, cada caja sigue el flujo en su orden natural.

Flexbox

Entrega al contenedor la habilidad para alterar el ancho o alto, y los espaciados de sus elementos, para así ajustarse de la mejor manera al espacio disponible. Funcionan en un eje, ya sea horizontal o vertical.
display: flex; --} Los contenedores se ubican en la misma línea. Se suele ocupar en los menús de navegación.

• Ya sea horizontal o vertical, en ambos ejes, los tamaños se ajustan al tamaño total del body, no al de la pantalla.
• Predeterminadamente, se distribuyen en el eje horizontal pero se puede cambiar al eje vertical.
• flex-direction: row, column, row-reverse, column-reverse

Distribución

Propiedades:

• justify-content= Alineación de elementos en el eje principal. (flex-start, flex-end, center, space between, space around, space-evenly)
• align-content= Distribución de espacios restantes en el eje secundario. (flex-start, flex-end, center, stretch, baseline)
• align-items= Alineación de elementos en el eje secundario. (flex-start, flex-end, center, stretch, baseline)
• align-self= Alineación del propio elemento en el eje secundario. Se aplica a un elemento flexible, no a un contenedor. (flex-start, flex-end, center, stretch, baseline)

Dimensiones

Flexbox permite definir reglas de dimensiones para los elementos, orientadas a adaptar los tamaños para distintas resoluciones.

• flex-basis: 25%; --} Cada row ocupara en 25% del espacio total.
• flex-grow: 1; --} Cada uno ocupara el mismo valor de espacio dentro del total. Si uno de los elementos, tuviera flex-grow: 2, ocuparía el doble de espacio.
• flex-shrink: 2;--} El elemento ocupará la mitad del espacio. Es decir 1:2.