Flexbox

Propiedad Flex

Es un modelo de layout que requiere la relcaión de un contenedor (llamado flex-container) y de sus hijos directos (llamdos flex-items). De esa manera, el flex-container define un contexto respecto al cual los flex-items van a organizarse y calcular sus dimenciones.

	<div class='flex-container'>
		<div class='flex-items'></div>
		<div class='flex-items'></div>
		<div class='flex-items'>
			<div class='flex-item--child'></div>
		</div>
	</div>

En el ejemplo anterior, fles-item--child no se considera un flex-item porque no es un hijo directo del flex-container. Se definte un flex-container:

	.flex-container{
		display:flex;
	}

Sin embargo, un flex-item podría sera a su vez un flex-container y así sucesivamente.

	.flex-items{
		display:flex;
	}

Ejes

Cada vez que se define un flex-container este adquiere automáticamente dos ejex

Main axis (principal, horizontal por default)
Cross axis (secundario, vertical por default)

De forma predeterminada los elementos (flex-items) se alinean respecto al main axis.

La direccíon de los ejes puede cambiarse con la propiedad flex-direction (aplica al container)

	.container-demo{
		display:flex;
		flex-direction:row-reverse;
	}

Los valores para flex-direccion son:

row (default)
row-reverse (right to left)
column (top to bottom)
column-reverse (bottom to top)

Alinear elementos respecto al main-axis

Se usa la propiedad justify-content

flex-start (al inicio
flex-end (al final)
center (al medio)
space-between (divide el espacio sobrante y lo distribuye entre los items)
space-around (divide el espacio sobrante y lo distribuye alredor de los items)

Alinear los elementos respecto al cross-axis

Para esto se usa la propiedad (del container): align-items (cuando es una sola fila) y align-content (cuando son dos o más filas)

stretch
flex-star
flex-end
center
baseline

Cuando un elemento no tiene hijos y solo tiene texto dentro, el texto se convierte en un flex-item es que el elementos se convierte en un flex-container.

Flex-items

los flex-items de forma predeterminada intetan rellenar todo el espacio disponible en el main-axis. Si el tamaño sumado de todos los flex-items supera al main-size, los items se encogerán (por más que tengan una dimención declarada, width o height).

"flex box"

Los atems son cajas flexibles (flexible boxes), esto significa que pueden crecer o encogerse según las circunstancias. Ignorando sus dimensiones declaradas.

Existen tres propiedades que se definen el main-size de un flex-item:

flex-basis (indica el tamaño base)
flex-grow (define el crecimiento)
flex-shrink (define el encogimiento)

Dimensiones de los flex-items

Cross-size

Si se ha definido, este se respeta.
Si no se ha definido hay dos opcionse
- Si align-items es stretch (o no se define) el cross-size será todo el espacio disponible.
- Si align-items es diferentes de stretch (o los items están en varias filas) el cross-size es realtivo al contenido y al box-model.

Main size

Se calcula con flex-basis, flex-grow y flex-shrink

Flex-basis

flex-basis es el tamaño base para el main-size
Esto significa que no siempre será el tamaño calculado final
flex-basis siempre gana sobre la dimension relativa declarada (exepto si flex-basis es auto

Flex-grow

Indica cuantas unidades crecerá un item
Su valor es un número entero positivo
El valor de cada unidad se calcula dividiendo el espacio disponible entre la suma de unidades totales
Por defecto, los flex-items comienza con flex-grow:0

* El espacio disponible es el espacio total del contenedor menos el espacio ocupado por los items y sus márgenes

Flex-shrink

Indica cuantas unidades se encogerá un item
Su valor es un número entero positivo
El valor de cada unidad se calcula dividiendo el espacio disponible entre la suma de unidades totales
Por defecto, los flex-items comienza con flex-grow:1

Flujo

flex-wrap

Con esta propiedad se determina si los items se colocan en una sola fila (linea) o en varias. Se aplica al container.

flex-wrap: no-wrap (default, una sola linea)
flex-wrap: wrap (varias lineas)
flex-wrap: wrap-reverse (varias lineas en sentido inverso)

order

Esta propiedad permite mover un elemento en el "flujo visual" (no lo mueve en el html). Todos los elementos comienzan con un order: 0, y a mayor número el elemento aparece después. Se aplica a los items.