EJES PRINCIPAL Y TRANSVERSAL

Eje	Descripción	Propiedades	Valores
Eje Principal	Definido por `flex-direction`.	`justify-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
Eje Transversal	Perpendicular al eje principal.	`align-items`	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`

VALORES DE FLEX-DIRECTION Y EFECTO EN LOS EJES

Valor de `flex-direction`	Eje Principal (Main Axis)	Eje Transversal (Cross Axis)
`row`	Horizontal (izquierda a derecha)	Vertical (arriba a abajo)
`row-reverse`	Horizontal (derecha a izquierda)	Vertical (arriba a abajo)
`column`	Vertical (arriba a abajo)	Horizontal (izquierda a derecha)
`column-reverse`	Vertical (abajo hacia arriba)	Horizontal (izquierda a derecha)

Ejes en Flexbox

Eje Principal (Main Axis)

Descripción: Este eje es definido por la propiedad flex-direction. Dependiendo de su valor, el eje principal puede ser horizontal o vertical.
Valores de flex-direction:
- row: Eje principal horizontal (de izquierda a derecha).
- row-reverse: Eje principal horizontal (de derecha a izquierda).
- column: Eje principal vertical (de arriba hacia abajo).
- column-reverse: Eje principal vertical (de abajo hacia arriba).
Propiedades que utilizan el Eje Principal:
- justify-content: Alinea los elementos a lo largo del eje principal.
  - Valores:
    - flex-start: Alinea al inicio del eje.
    - flex-end: Alinea al final del eje.
    - center: Centra los elementos en el eje.
    - space-between: Distribuye los elementos con espacio entre ellos.
    - space-around: Distribuye los elementos con espacio alrededor de ellos.

Eje Transversal (Cross Axis)

Descripción: Este eje es perpendicular al eje principal. Su orientación depende de cómo se haya definido el eje principal.
Propiedades que utilizan el Eje Transversal:
- align-items: Alinea los elementos a lo largo del eje transversal.
  - Valores:
    - flex-start: Alinea al inicio del eje transversal.
    - flex-end: Alinea al final del eje transversal.
    - center: Centra los elementos en el eje transversal.
    - baseline: Alinea los elementos a lo largo de la línea base del texto.
    - stretch: Estira los elementos para que ocupen todo el espacio disponible en el eje transversal (valor por defecto).

¡Hola Estudiante, espero que estés bien!

Entiendo que estás explorando cómo funcionan los ejes principal y transversal en Flexbox, y cómo esto afecta el posicionamiento de los elementos. En Flexbox, el eje principal y el eje transversal son conceptos clave para entender cómo se distribuyen y alinean los elementos dentro de un contenedor flexible.

Cuando usas flex-direction: row, el eje principal es horizontal (de izquierda a derecha), mientras que el eje transversal es vertical (de arriba a abajo). Por otro lado, si usas flex-direction: column, el eje principal se convierte en vertical y el eje transversal en horizontal.

En tu caso, al cambiar flex-direction a column, el eje principal se vuelve vertical. Esto significa que para centrar los elementos verticalmente dentro del contenedor, deberías usar align-items: center, ya que esta propiedad alinea los elementos a lo largo del eje transversal, que es ahora horizontal.

Aquí tienes un ejemplo práctico:

.presentación_enlaces {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los elementos horizontalmente */
  gap: 32px; /* Espacio entre los elementos */
}

Con este código, tus botones deberían alinearse verticalmente y estar centrados horizontalmente en el contenedor. Además, el gap de 32px añadirá el espacio deseado entre los botones.

Espero que esta explicación te ayude a entender mejor cómo funcionan los ejes en Flexbox y cómo puedes utilizarlos para lograr el diseño deseado. ¡Bons estudos!