Flexbox

display: flex

El elemento que se aplica flex adopta propiedades de flex-container y a sus hijos directos se les aplicará las propiedades de flex-item.

<div class="flexcontainer">
  Container
  <div class="boxflex">Item</div>
  <div class="boxflex">Item</div>
  <div class="boxflex">Item</div>
  <div class="boxflex">Item</div>
  <div class="boxflex">Item</div>
</div>

flex-direction

row (default) | row-reverse | column | column-reverse

row: organiza los items en líneas. column: organiza los items en columnas.

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-grow: number

El valor por defecto 0 asigna el mismo espacio para todos los items, cuando asignamos otro valor mayor que cero se asigna más espacio dinámico para el item.

flex-wrap

no-wrap (default) | wrap | wrap-reverse

• no-wrap: modifica el tamaño de los items para mantenerlos en la misma línea.
• wrap: respeta el tamaño de cada item y cuando no cabe en la misma línea lo envía a la línea de abajo.
• wrap-reverse: lo mismo que wrap pero envía el item en la línea de arriba. no-wrap

wrap

wrap-reverse

flex-flow

row nowrap (default) | column wrap

Se trata de un shorthand para cambiar los dos valores de flex-direction y flex-wrap con una única propiedad.

justify-content

flex-start (default)| flex-end | center | space-between | space-around | space-evenly

• flex-start: posiciona en el principio del main axis.
• flex-end: posiciona en el final del main axis.
• center: centra los items.
• space-between: separa lo máximo posible entre items.
• space-around: separa con el mismo margen entre items.
• space-evenly: mismo espacio entre items y los extremos.

justify-content: flex-start

justify-contet: flex-end

justify-contet: center

justify-content: space-between

justify-conent: space-around

justify-content: space-evenly

Align-items

flex-start | flex-end | center | stretch | baseline

• flex-start: fija los items en el inicio del cross axis.
• flex-end: fija los items en el final del cross axis.
• center: centra los items verticalmente.
• stretch (default): ocupa todo el alto del contenedor.
• baseline:

align-items: flex-start

####align-items:flex-end

align-items:center

Centra el punto medio de cada item.

align-items: stretch para que funcione no debe tener ningún valor o auto en height.

align-items: baseline El contenido se encuentra centrado en la misma línea.

align-content

flex-start | flex-end| center | stretch (default)| space-between |space-around | space-evenly

Trabaja igual que align-items pero se aplica cuando hay más de una fila.

align-content: flex-start

align-content: flex-end

align-content: center

align-content: stretch

align-content: space-between

align-content: space-around

align-content: space-evenly

align-self

auto | flex-start | flex-end | center | baseline | stretch

flex

grow & shrink & basis

0 1 auto (default)

• grow: distribuye el espacio sobrante entre los items.
• basis: asigna el espacio al item dependiendo de la dirección. (row - width) (column - height)
• shrink: encoge el item tantas veces como el número asignado cuando el espacio en el viewport es más pequeño al necesario. *Para ver el efecto hay que modificar el tamaño de la ventana.