Volver Atras

Compilado de Instrucciones CSS de Flex-box: Justify-Content, Align-Items y Align-Self

justify-content:

  • flex-start: Alinea elementos a la parte izquierda del contenedor
  • flex-end: Alinea elementos a la parte derecha del contenedor
  • space-between: Distribuye horizontalmente los elementos dentro del contenedor (sin espacio a izquierda ni a derecha del grupo)
  • space-around: Distribuye horizontalmente los elementos dentro del contenedor (asignando un margen izq. y der. a cada elemento)
  • space-evenly: Distribuye horizontalmente los elementos dentro del contenedor (con espacio a izquierda ni a derecha del grupo)
Mas sobre Justify-Content...

align-items, align-self, align-content:

  • flex-start: Alinea verticalmente elementos a la parte superior del contenedor
  • flex-end: Alinea verticalmente elementos a la parte inferior del contenedor
  • center: Alinea verticalmente elementos al centro del contenedor
  • baseline: Alinea los elementos en la línea base del font de cada elemento del contenedor
  • stretch: Elementos se estiran para ajustarse al contenedor
Mas sobre Align-Items, Align-Self, Align-Content...