Propiedades Flexbox y su función:

 1. justify-content: Alinea los elementos horizontalmente dentro de un contenedor flex. Los valores posibles son:

• flex-start: Alinea los elementos al lado izquierdo del contenedor.
• flex-end: Alinea los elementos al lado derecho del contenedor.
• center: Alinea los elementos en el centro del contenedor.
• space-between: Muestra los elementos con la misma distancia entre ellos. El primer elemento se alinea al inicio y el último al final, con espacio uniforme entre los elementos.
• space-around: Muestra los elementos con la misma separación alrededor de ellos, incluyendo el espacio entre el borde del contenedor y los elementos.

2. align-items: Alinea los elementos verticalmente dentro de un contenedor flex. Los valores posibles son:

• flex-start: Alinea los elementos a la parte superior del contenedor.
• flex-end: Alinea los elementos a la parte inferior del contenedor.
• center: Alinea los elementos en el centro (verticalmente hablando) del contenedor.
• baseline: Muestra los elementos en la línea base del contenedor. Es útil cuando los elementos tienen diferentes tamaños de texto.
• stretch: Estira los elementos para ajustarse al tamaño del contenedor (de forma predeterminada, los elementos se expanden para llenar el eje transversal).

3. flex-direction: Define la dirección en que los elementos son distribuidos dentro de un contenedor flex. Los valores posibles son:

• row: Los elementos son colocados en una fila, en la misma dirección del texto (de izquierda a derecha en idiomas occidentales).
• row-reverse: Los elementos son colocados en una fila, pero en la dirección opuesta al texto (de derecha a izquierda).
• column: Los elementos son colocados en una columna (de arriba hacia abajo).
• column-reverse: Los elementos son colocados en una columna, pero de abajo hacia arriba.