-
Flex Direction: row | column
Colocar todos los elementos en la direccion que se les indica. Si es row todos los elementos estaran colocados en una fila y si es column todos los elementos estaran en una columna.
-
Flex Wrap: no wrap | wrap
Esta propiedad permite que los elementos "caigan" a la parte inferior en caso de que estos no quepan en el ancho de la ventana.
-
Justify Content: flex-start | flex-end | center | space-between | space-evenly | space-around
Justifica el contenido con referencia a la dirección que he indicado en mi flex. Por ejemplo, si el flex-direction es row, el justify-content alineara con repecto al eje x; y si es column, se alinearan con repecto al eje y
- flex-start: izquierda (row), arriba (column)
- flex-end: derecha (row), abajo (column)
- center: centrado
- space-between: agregar espacio entre los elementos, dejeando los elementos de los extremos pegados a los limites de la ventana
- space-evenly: agrega espacio entre los elementos, incluyendo los elementos de los extremos para que NO esten pegados a la ventana
- space-around: agrega un espaciado alrededor de los elementos, es parecido al "space-evenly" pero la diferencia esta en los extremos
-
Align Items: flex-start | flex-end | center | stretch
Justifica el contenido con referencia a la dirección opuesta del flex-direction que he indicado en mi flex. Por ejemplo, si el flex-direction es row, el align-items alineara con repecto al eje y; y si es column, se alinearan con repecto al eje x
- flex-start: izquierda (column), arriba (row)
- flex-end: derecha (column), abajo (row)
- center: centrado
- stretch: expande los hijos para rellenar al tamaño del padre
-
Flex Shrink: 0 … 1
Sirve para denotar la capacidad de encojimiento de los elementos, esto se suele usar si es que se quiere indicar hasta donde el layout puede cambiar de tamaño nuestros elementos.
-
Align Self: flex-start | flex-end
Sirve para alinear los elementos en el eje del align-items de manera individual.