Eje principal y eje transversal en contenedores flexibles en CSS
Se puede hablar de flexbox en dos términos: el primero es fila o columna, el segundo es en términos de ejes. Ya hemos tratado las filas y columnas, ahora analicemos los ejes. Comprender los ejes es necesario para alinear elementos horizontal o verticalmente.
Cuando se trabaja con elementos flex, siempre existe
un eje principal y un eje transversal. Podemos alinear los elementos
a lo largo del eje principal y a través del
eje principal. El eje principal puede tener 4
direcciones: de izquierda a derecha, de derecha a izquierda,
de arriba a abajo y de abajo a arriba.
La dirección del eje transversal depende de la dirección del eje principal: si el eje principal es horizontal, el eje transversal va de arriba a abajo; si el eje principal es vertical, el eje transversal va de izquierda a derecha. El eje transversal no puede tener otras direcciones.
La dirección del eje principal se controla con la propiedad
flex-direction. Si esta propiedad
tiene el valor row, el eje principal va
de izquierda a derecha; si el valor es row-reverse,
entonces de derecha a izquierda. El valor column
dirige el eje de arriba a abajo, y el valor column-reverse
de abajo a arriba.
Supongamos que el eje principal es horizontal. ¿Hacia dónde estará dirigido el eje transversal?
Supongamos que el eje principal es vertical. ¿Hacia dónde estará dirigido el eje transversal?
Supongamos que el eje transversal está dirigido hacia la derecha. ¿Hacia dónde podría estar dirigido el eje principal en ese caso?
Supongamos que el eje transversal está dirigido hacia abajo. ¿Hacia dónde podría estar dirigido el eje principal en ese caso?
¿Puede el eje transversal estar dirigido de derecha a izquierda?
¿Puede el eje transversal estar dirigido de abajo a arriba?
Supongamos que la propiedad flex-direction tiene
el valor row. ¿Hacia dónde estará dirigido
el eje principal? ¿Hacia dónde estará dirigido
el eje transversal?
Supongamos que la propiedad flex-direction tiene
el valor column. ¿Hacia dónde estará dirigido
el eje principal? ¿Hacia dónde estará dirigido
el eje transversal?
Supongamos que la propiedad flex-direction tiene
el valor row-reverse. ¿Hacia dónde estará dirigido
el eje principal? ¿Hacia dónde estará dirigido
el eje transversal?
Supongamos que la propiedad flex-direction tiene
el valor column-reverse. ¿Hacia dónde estará
dirigido el eje principal? ¿Hacia dónde estará dirigido
el eje transversal?