Skip to content

Instantly share code, notes, and snippets.

@mauriballes
Last active March 18, 2019 22:51
Show Gist options
  • Save mauriballes/58b9c2eae3fe17f608dafa09ab35eddb to your computer and use it in GitHub Desktop.
Save mauriballes/58b9c2eae3fe17f608dafa09ab35eddb to your computer and use it in GitHub Desktop.
Flexbox Notes

Flexbox Notes

Flex

Father Properties

  • 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

Child Properties

  • 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment