Skip to content

Latest commit

 

History

History
32 lines (23 loc) · 1.61 KB

README.md

File metadata and controls

32 lines (23 loc) · 1.61 KB
Raw

notes-flexbox

Intro a Flexbox

Es un módulo de CSS que nos permite, de forma más eficiente, armar diferentes layouts, alinear y distribuir el espacio entre los items de un container.

Hay un cambio de perspectiva respecto de cómo manejamos el layout en comparación a usar Floats: pensamos en cómo se comportan los elementos dentro de un container en lugar de cómo lo hace c/u en particular. Además, tenemos mayor control sobre la alineación, dirección, orden y tamaño de los elementos, mientras que con Floats sólo podemos controlar cómo se comportan cada elemento en el eje horizontal.

  • axis

    • main (default ➡️)
    • cross (default ⬇️)

  • container props

    • direction: setear la dirección del eje principal (main axis)
      • row, column, row-reverse, column-reverse
    • flex-wrap: podemos forzar que los elementos ocupen 1 sola línea
      • wrap-reverse: cambia la dirección del cross axis
    • justify-content: define cómo se distribuye el espacio entre items a lo largo del main axis
    • align-items: define cómo se distribuye el espacio entre items a lo largo del cross axis

  • flex-items props

    • align-self
    • flex
      • flex-grow
      • flex-shrink
      • flex-basis

Flexbox Tips

  • tener en cuenta que justify-content y align-items siempre son relativas a la dirección de los ejes! (ej: flex-direction: row-reverse & justify-content: flex-end)
  • para centrar cosas (aplica para CSS en general), necesitamos definir al menos height del contenedor de forma explícita. En el caso del ancho, por default va a tomar el ancho del contenedor.