Modalidades de flex
Tipo de elemento Descripción
display: inline-flex; Establece un contenedor en línea, similar a inline-block (ocupa solo el contenido).
display: flex; Establece un contenedor en bloque, similar a block (ocupa todo el ancho del padre).
Dirección de los ejes
Propiedad Valor Significado
flex-direction row | row-reverse | column | column-reverse Cambia la orientación del eje principal.
Contenedor flex multilínea
Propiedad Valor Significado
flex-wrap nowrap | wrap | wrap-reverse Evita o permite el desbordamiento (multilinea).
Atajo: Dirección de los ejes
flex-flow: <flex-direction> <flex-wrap>;
Huecos (gaps)
Propiedad Valor Descripción
row-gap normal | SIZE Espacio entre filas (sólo funciona con flex-direction: column)
column-gap normal | SIZE Espacio entre columnas (sólo funciona con flex-direction: row)
Atajo: Huecos
Propiedad Valor Descripción
gap 0 | SIZE Aplica el tamaño indicado para el hueco en ambos ejes.
gap 0 0 | SIZE SIZE Aplica los tamaños indicados para el hueco del eje X y el eje Y.
Propiedades de alineación
Propiedad Valor Actúa en eje
justify-content flex-start | flex-end | center | space-between | space-around | space-evenly eje principal
align-items flex-start | flex-end | center | stretch | baseline eje secundario
align-content flex-start | flex-end | center | space-between | space-around | space-evenly | stretch eje secundario
Alineaciones específicas
Propiedad Valores Actúa en eje
align-self auto | flex-start | flex-end | center | stretch | baseline Secundario
Atajo: Alineaciones
place-content: <align-content> <justify-content>;
Orden de los elementos
Propiedad Valor Descripción
order 0 | NUMBER Número (peso) que indica el orden de aparición de los ítems.
Propiedades de flexibilidad
Propiedad Valor Descripción
flex-basis SIZE | content Tamaño base de los ítems antes de aplicar una variación.
flex-grow 0 | NUMBER Número que indica el factor de crecimiento del ítem (si no ocupa el 100% del padre).
flex-shrink 1 | NUMBER Número que indica el factor de decrecimiento del ítem (si ocupa el 100% del padre).
Atajo: La propiedad flex
Propiedad Valor Descripción
flex (1 parámetro) none | BASIS | GROW Establece un tamaño base o un factor de crecimiento.
flex (2 parámetros) GROW SHRINK Establece un factor de crecimiento y un factor de decrecimiento.
flex (3 parámetros) 0 1 auto |GROW SHRINK BASIS Establece el factor de crecimiento y decrecimiento y el tamaño base.
