FLEXBOX EN CSS
- Elementos básicos
o El eje principal (eje horizontal): justify-content
Alineación con el eje principal, de forma horizontal
Flex-end
Flex-start
Center
Space-between (mismo espacio entre ellos, el primero en el
inicio y el último al final)
Space-around (mucho espacio alrededor)
Space-evenly (mismo espacio entre ellos desde el inicio)
o El eje secundario (eje vertical): align-items
Alineación con el eje secundario, de forma secundaria
Flex-start: Elementos a la parte superior
Flex-end: Elementos a la parte inferior
Center: Centra los elementos
Baseline: Elementos en la línea base del contenedor
Stretch: Los elementos se estiran para ajustarse al contenedor
- Modificar el contenedor
display:flex;
- Dirección de los ejes
- Desbordamiento o no
- Atajo: flex flow (direction) (wrap/nowrap/wrap-reverse)
- Alineación con el eje secundario, de forma vertical (global y en torno a sí mismo)
align-self: opcion;
o Mismas opciones que align-items. Sobreescribe la opción align-items.
- Orden de los ítems
order: orden;
- Align-content: Alinea las líneas de un contenedor flex. Utiliza las mismas opciones que
align-content.
- Factor de crecimiento
flex-grow: 1;
- Factor de decrecimiento
flex-shrink: 1;
- Tamaño por defecto
flex-basis:Xpx;
- Huecos entre ítems
row-gap: 5px;
column-gap: 10px;
Actividad introductoria: https://flexboxfroggy.com/#es
https://mastery.games/flexboxzombies/
