CSS Flex

Propiedades aplicadas al contenedor

/* Para activar flex en el div que contendra a los items */
display: flex;

flex-direction: Define como se distribuirán los items dentro del contenedor.

/* Los hijos se muestran en una fila de izquierda a derecha */
flex-direction: row;

/* Como <row>, pero al revés (de derecha a izquierda)*/
flex-direction: row-reverse;

/* Los hijos se muestran en una columna de arriba a abajo */
flex-direction: column;

/* Como <column>, pero al revés (de abajo hacia arriba)*/
flex-direction: column-reverse;

justify-content: distribución horizontal.

/* Alinear items flex desde el comienzo */
justify-content: flex-start;

/* Alinear items desde el final */
justify-content: flex-end;

/* Alinear items en el centro */ 
justify-content: center;

/* Distribuir items uniformemente
El primer item al inicio, el último al final */
justify-content: space-between;

/* Distribuir items uniformemente
Los items tienen el mismo espacio a su alrededor */
justify-content: space-around;

/* Distribuir items uniformemente
Los items tienen el mismo espacio entre ellos */
justify-content:space-evenly;

align-items: distribución vertical.

/* Pega todos los item arriba (top 0) */
align-items: flex-start; 

/* Centra los items verticalmente */
align-items: center;

/* Pega todos los item abajo (bottom 0) */
align-items: flex-end;

/* Alinea los items a la linea base del texto */
align-items: baseline;

/* Estira la altura de los items para ocupar todo el alto del padre */
align-items: stretch;

flex-wrap : especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas

valor inicial : nowrap

/* Los elementos flex son distribuidos en una sola línea */
flex-wrap: nowrap

/* Los elementos flex son colocados en varias líneas */
flex-wrap: wrap

/* Igual que wrap, pero pone los items en reversa */
flex-wrap: wrap-reverse

Propiedades del item

flex-shrink : especifica el factor de contracción de un flex item.

Cuanto mayor sea el número, más se reducirá en comparación con los otros artículos en el contenedor. Por ejemplo, si un artículo tiene un valor de contracción flexible de 1 y el otro tiene un valor de contracción flexible de 3, el que tiene el valor de 3 se reducirá tres veces más que el otro.

#item-1 {
  flex-shrink:1;
}

/* Se encogerá el doble que item 1 */
#item-2 {
  flex-shrink:2;
}

flex-grow : especifica el factor de crecimiento de un flex item.

Cuanto mayor sea el número, más crecerá en comparación con los otros artículos en el contenedor. Por ejemplo, si un artículo tiene un valor de crecimiento flexible de 1 y el otro tiene un valor de crecimiento flexible de 3, el que tiene el valor de 3 se aumentara tres veces más que el otro.

#item-1 {
  flex-grow:1;
}

/* Crecerá el el triple que item 1 */
#item-2 {
  flex-grow:3;
}

flex-basis : especifica el ancho del item.

/* Especificar <'width'> */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* Palabras clave de dimensionamiento intrínseco */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Tamaño automático basado en el contenido del elemento flexible */
flex-basis: content;

align-self : alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de align-items

/* Valores clave */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* Valores globales */
align-self: inherit;
align-self: initial;
align-self: unset;