Jere

Flexbox Notes

####justify-content:

  • flex-start: Alinea elementos al lado izquierdo del contenedor.
  • flex-end: Alinea elementos al lado derecho del contenedor.
  • center: Alinea elementos en el centro del contenedor.
  • space-between: Muestra elementos con la misma distancia entre ellos.
  • space-around: Muestra elementos con la misma separación alrededor de ellos.

####align-items:

  • flex-start: Alinea elementos a la parte superior del contenedor.
  • flex-end: Alinea elementos a la parte inferior del contenedor.
  • center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
  • baseline: Muestra elementos en la línea base del contenedor
  • stretch: Elementos se estiran para ajustarse al contenedor.

####flex-direction:

  • row: Elementos son colocados en la misma dirección del texto.
  • row-reverse: Elementos son colocados en la dirección opuesta al texto.
  • column: Elementos se colocan de arriba hacia abajo.
  • column-reverse: Elementos se colocan de abajo hacia arriba.

###order:

  • a veces, invertir el orden de una fila o columna de un contenedor no es suficiente. En esos casos, nosotros podemos aplicar la propiedad order a elementos individuales. Por defecto, los elementos tienen un valor 0, pero nosotros podemos usar esta propiedad para establecerlo a un número entero positivo o negativo.

###align-self:

  • Esta propiedad acepta los mismos valores de align-items y sus valores son usados para un elemento específico

###flex-wrap:

  • nowrap: Cada elemento se ajusta en una sola línea.
  • wrap: los elementos se envuelven alrededor de líneas adicionales.
  • wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales en reversa.

###flex-flow:

  • Las dos propiedades flex-direction y flex-wrap son usadas a menudo en conjunto con la propiedad abreviada flex-flow, la cual fue creada para combinarlas. Esta propiedad abreviada, acepta un valor de cada una separada por un espacio.

###align-content:

  • flex-start: Las líneas se posicionan en la parte superior del contenedor.
  • flex-end: Las líneas se posicionan en la parte inferior del contenedor.
  • center: Las líneas se posicionan en el centro (verticalmente hablando) del contenedor.
  • space-between: Las líneas se muestran con la misma distancia entre ellas.
  • space-around: Las líneas se muestran con la misma separación alrededor de ellas.
  • stretch: Las líneas se estiran para ajustarse al contenedor.