Resumen propiedades y valores Flexbox

-Para activar el modo flexbox:

Propiedad valor Descripcion
Display: flex Establece un contenedor de ítems flexible en bloque,
de forma equivalente a block.
Dispaly: inline-flex Establece un contenedor de ítems flexible en línea,
de forma equivalente a inline-block.

-Direccion de los ejes :

Propiedad Valores posibles Descripcion
flex-direction: row Cambia la orientación del eje principal.
row-reverse
column
column-reverse
flex-wrap: nowrap Evita o permite el desbordamiento (multilinea).
wrap
wrap-reverse

-Atajo (short-hand): Dirección de los ejes:

Propiedad Propiedades agrupadas Descripcion
Flex-flow: Flex-direction flex-wrap; Propiedad de atajo (short-hand)
-Propiedades de alineación de ítems

Propiedad Valor Actua sobre

justify-content: flex-start flex-end center space-between
space-around Eje principal
align-content: flex-start flex-end center space-between |
space-around stretch Eje principal
align-items: flex-start flex-end center stretch baseline Eje secundario
align-self: auto | flex-start | flex-end | center | stretch Eje secundario
| baseline

*Diferencia entre align-items y align-self: la propiedad align-self actúa exactamente igual

que align-items, la diferencia es que se utiliza sobre un ítem hijo específico y no sobre el
elemento contenedor.

-Propiedades de ítems hijos

Propiedad Valor Descripcion

flex-grow: x X es un numero entero que indica el crecimiento del ítem
respecto al resto.

flex-shrink: x X es un numero entero que indica el decrecimiento del ítem

respecto al resto.

flex-basis: 100px Tamaño base de los ítems antes de aplicar variación.

auto
initial
inherent

order: x Número (peso) que indica el orden de aparición de los ítems.

Atajo: Propiedades de ítems hijos

La propiedad llamada flex sirve de atajo para tres propiedades de los ítems hijos.

Propiedad Propiedades agrupadas Descripcion

flex: flex-grow flex-shrink flex-basis propiedad de atajo (short-hand)