FlexBox

Requiere de dos elementos padres e hijos y al poner la propiedad display: flex, ese elemento se
vuelve Flex-Container y sus hijos directos Flex-Items.

1.Main axis (Eje principal) | Cross axis (Eje secundario).

2.Main size (Puede ser width/height)  Tamaño relativo al eje principal.
Cross size (Puede ser height/width)  Tamaño relativo al eje secundario.
3.Main star (Donde comienza el eje principal) | Main end (Donde termina).
4.Cross star (Donde comienza el eje secundario) | Cross end (Donde termina).

Flex Container:

1. Display: Flex  Los elementos uno al lado del otro, respecto a su eje principal
horizontalmente (Main Axis).
Display: inline-flex  Hace que el flex-container se comporte como un elemento inline.
2. Flex-direction: Determina la dirección del Main Axis.
 Propiedades:
1. Row (Fila).
2. Row-reverse (Invierte las filas).
3. Column (Columna).
4. column-reverse (Invierte las columnas).
3. Flex-wrap: Indica si los Flex-items se van alinear en 1 o más líneas.
 Propiedades:
1. nowrap (Valor predeterminado).
2. wrap (Si no hay espacio para el siguiente elemento, salta a la siguiente
línea).
3. wrap-reverse (Invierte las líneas en el eje secundario, no los items).
 Nota: Funciona a nivel de líneas, no de ítems.
4. Flex-Flow(acortador): flex-direction - flex-wrap.

Alineación:

1.Alineación de items.
 Justify-Content: Alinea los ítems en el eje principal (Main Axis).

1. Flex-start (Alinea al inicio), valor predeterminado.

2. Flex-end (Alinea al final).
3. Center (Centra los ítems).
4. Space-between (Distribuye el espacio entre los ítems).
5. Space-around (Distribuye el espacio alrededor de los items).
6. Space-evenly (Funciona como Space-around, con la diferencia que el
espacio entre los elementos y alrededor se distribuye equitativamente).

 Align-items: Alinea los ítems en el eje secundario (Cross Axis).

1. Flex-start (Alinea al inicio).

2. Flex-end (Alinea al final).
3. Center (Centra los ítems).
4. Baseline (Alinea respecto a la línea base del texto).
5. Strech (Llena todo el espacio en el eje secundario), valor
predeterminado.

2.Alineación de línea.
 Align-content: Alinea las líneas en el eje secundario, no los ítems.

1. Flex-start.
2. Flex-end.
3. Center.
4. Space-between.
5. Space-around.
6. Space-evenly.
7. Strech (Predeterminado).

Flex Ítems:

 Flex-ítems. - Son los (hijos directos) del Flex Container.

o También pueden ser:

1. Pseudoelementos.
 2. Texto.

 Los Flex-ítems, con position: absolute/fixed no participan del flujo, porque pierden
su posición en el flujo.

 Los flex-items, pueden crecer(grow) o reducirse(shrink) a voluntad.

 Los márgenes y los paddings no se contraen.

flex-grow: Factor de crecimiento.

El navegador divide el espacio disponible entre la cantidad total, de Flex-Grows y se los asigna
a los Items.

 Calcular: Ejemplo

o Cantidad total de flex-grow: 10+10+10+10+10= 50;

o Espacio disponible: 627px;
o Dividir espacio disponible: 627/50(factor de crecimiento) = 12,5;

Teniendo el factor de crecimiento el navegador lo multiplica por el valor de flex-grow en

cada Item y se lo suma al tamaño del item.

1. 10(flex-grow) * 12,5 = 125,5 + 34,5(ancho del item) = 160px;

flex-shrink: Factor de reducción.

 El cálculo es el mismo que el Flex-grow, pero teniendo en cuenta que se calcula
mediante el espacio sobrante.

 Imaginariamente el ancho del contenedor es de: 1000px.

 Cada item tiene un tamaño de: 300px.

Teniendo en cuenta que hay 5 items se suma el tamaño total de todos los items:
300*300*300*300*300 = 1500px.
El espacio sobrante se resta con el tamaño del contenedor: 1000px - 1500px = 500px.
Al espacio sobrante se divide con el total de flex-shrinks (por defecto es 1) = 500/5(total se
flex-shrinks) = 100px.
Una vez se tiene el factor de reducción se multiplica por los flex-shrinks de cada Item.
1. 1 * -100px = -100px - 300px (tamaño del Item) = -200px.

Flex-basis: Tamaño inicial en el eje principal (width/height).

 Truco: Para que los items midan igual.
o flex-basis: 0.
 o flex-grow: 1.

Flex (Shorthand): flex-grow - flex-shrink - flex-basis.

 Valores:
o inital: 0 1 auto (por defecto).
o auto: 1 1 auto (Crecerán, reducirán y su Main Size será respecto su contenido).
o none: 0 0 auto (No existe Flex box).
o n (cualquier número positivo): n 0 0.

Align-self: Alinea un único elemento.

 Valores:
o flex-star.
o flex-end.
o center.
o baseline.
o strech.

Order: Permite a través de números enteros(positivos/negativos) reordenar los elementos en el

flujo.
 Todos los elementos tienen por defecto Order: 0.

GRID
Concepto:
 Layout (Esqueleto): Es la geometría que calcula el navegador para saber dónde
colocar cada elemento y que tanto separarlo de los demás.

 FlexBox: Permite organizar elementos (Layout) a lo largo de un eje (main

axis), si bien tiene dos ejes, pero solo para alineación. Para elementos del
(layout) es solo uno.

 CSS Grid: Permite construir y organizar elementos del layout a través de dos
ejes. (Horizontal y Vertical)
 o No importa la posición de un elemento en el código HTML para
construir el layout.
o Al igual que FlexBox, requiere una relación de padre (Grid-
container) e hijos (Grid-items).

Terminología y elementos:

1. Elementos del DOM:

 Grid-container:
o display: grid (elemento de bloque).
o display: inline-grid (elemento de línea).

 Grid-items:
o Hijos directos.
o Pseudoelementos (before y after).
o Texto.

2. No existen en el DOM, el navegador los crea para posicionar y alinear

elementos.
  Grid-tracks:
o Las filas y columnas.

 Grid-lines:
o Se encuentran a los lados de los tracks, izquierda y derecha para
columnas, arriba y abajo para filas.

 Grid-cells:
o Intersección entre una fila y una columna.

 Grid-áreas:
o Cualquier área rectangular delimitada por 4 grid-lines.

 Definir tracks:

o Tipos de grid:
 Grid implícito.
 Grid explicito. NOTA: 1fr == 25%

o Tipos de tracks:
 Fijos.
 Flexibles.

 grid-template-columns: 3fr 1fr;  Sirve para crear columnas.

 grid-template-rows: 1fr 6fr 3fr;  Sirve para crear filas.

 Gri-gap: Marca una separación entre cada uno de los elementos.

 grid-column-gap: 2em;  Genera un espacio entre columnas.

 grid-row-gap: .5em;  Genera un espaciado entre filas.
 grid-gap: 2em 1em;  Shorthand para grid-column-gap y row-gap.

Posicionar grid-items:

 grid-column-start  El elemento comenzara en la columna X.

 grid-column-end  El elemento terminara en la columna X.

o grid-column (Shorthand)  grid-column-start / grid-column-end.

  grid-row-start  El elemento comenzara en la fila X.
 grid-row-end  El elemento comenzara en la fila X.

o grid-row  grid-column-start / grid-column-end.

 span (x) - Ocupa columnas en vez de líneas.

Comienza en la columna 1 y ocupa 3 columnas - Comienza en la fila

1 y ocupa 2 filas
Todos los elementos ocupan predeterminadamente 1 track.

 grid-template-columns: repeat (12, 1fr); Se le indica que cree 12 columnas de 1fr

cada una (todas del mismo tamaño).

 grid-template-rows: repeat (4, 1fr); Crea 4 filas de 1fr cada una del mismo tamaño.

Track Flexibles con FR:

¿Por qué los fr no respetan el tamaño asignado?

Sucede que los fr no pueden minimizarse más de lo que mide el contenido, por eso los
tamaños son variables en cada item.

Nota: Los gaps no son flexibles, si fue declarado con el valor 1em, siempre respetará
ese valor.

 Min-content  Ocupa lo mínimo de contenido posible sin que nada se desborde.

  Max-content  Ocupa el máximo tamaño de contenido posible.

 Fit-content (Función)  Como mínimo, usa el mínimo tamaño posible según el

contenido y como máximo FIT-CONTENT (400px).

Tracks flexibles con:

 Minmax (mínimo valor/máximo valor)  El navegador calculara el tamaño
según las circunstancias.

 auto-fit  Crea tanta columnas y filas como puedas, del tamaño X.

 auto-fill  Crea tanta columnas y filas como pueda, del tamaño X.

Diferencias entre auto-fit y auto-fill:

Auto-Fill, crea tracks nuevos, aunque no haya elementos suficientes. Mientras que
Auto-Fit, no crea tracks nuevo.

Combinar aufotill con minmax, se crearán tantas columnas como filas se

pueda y con tamaño mínimo de 200px y como máximo que cubra todo el
tamaño disponible

Grid Áreas:
Nos permite definir áreas dentro de GRID,
Para definir áreas, usaremos lo siguiente.
Grid-area, se puede usar como shorhand de grid-
column y grid-rows.

Alinear Items:
Los items automáticamente ocupan todo el espacio posible en el track.
Todos los items se alinean respecto al track que le corresponde.

 Justify-items: Esta propiedad alinea los items en el eje X, se aplica al contenedor padre
de los items.

 Justify-self: Se aplica directamente al item (al hijo que se desea alinear), cumple la
misma función que justify-items.

 Align-items: Esta propiedad alinea los items en el eje Y, se aplica directo al contenedor
padre.

 Align-self: Se aplica directamente al item (al hijo que se desea alinear), cumple la
misma función que align-items.
Alineación con margin:

La alineación estándar es con las propiedades anteriores, sin embargo, también es posible
alinear items con la propiedad margin en su valor auto.

Alinear tracks:
Los tracks pueden ser alineados respecto al contenedor padre con las siguientes propiedades:

 Justify-content: Esta propiedad alinea los tracks en el eje X (inline).

 Align-content: Esta propiedad alinea los tracks en el eje Y(block).

Nota: Se debe recordar que los tracks son ficticios/abstractos (no están en el DOM), solo
indican como se deben organizar los items.

Grid placement:

 grid-auto-flow: Es una propiedad de CSS Grid que es utilizada para indicar el sentido
en el que se posicionan los items (hijos) en el grid.

Valores:
o row (Por defecto).
o Column (Pone los items en columnas, en dado caso no estén definidas crea unas
columnas ficticias)

 grid-auto-rows: Esta propiedad indica que en caso de que se creen nuevas filas
implícitas, tengan un ancho definido para que no estén apretadas.

 grid-auto-columns: Cumple la misma función de grid-auto-rows, solo que en este

caso se le define un alto a las nuevas columnas que se creen de forma implícita.

 El valor dense: Este valor es aplicado a la propiedad grid-auto-flow, indica al

navegador que en caso encuentre huecos los rellene de cualquier manera (alterando el
orden de los items).