Dirección
Flexbox trabaja con dos ejes:
- El eje principal (main axis) definido por la propiedad
flex-direction. - El eje cruzado (cross axis), que es perpendicular a este.
A flebox le podemos indicar cuál es el eje principal y, con ello, deduce cuál es el cruzado, ya que éste es perpendicular al principal.
Tenemos dos configuraciones posibles de ejes:
- El eje principal es el eje horizontal (eje x). En este caso, el eje cruzado es el vertical (eje y). Es el valor predeterminado.
- El eje principal es el eje vertical (eje y). En este caso, el eje cruzado es el horizontal (eje x).
Para elegir entre una configuración u otra, utilizamos la propiedad flex-direction.
Elementos organizados en filas
La opción por defecto es la siguiente:
flex-direction: row
Con esta opción definimos que:
- El eje principal va a ser el de las filas (eje x).
- El eje cruzado va a ser el vertical (eje y).
Los elementos se irán organizando de izquierda a derecha.
Una variante es la siguiente:
flex-direction: row-reverse
Los ejes son los mismos, pero los elementos se organizan de derecha a izquierda (en el orden inverso).
Elementos organizados en columnas
La opción para organizar los elementos en columnas es la siguiente:
flex-direction: column;
Con esta opción definimos que:
- El eje principal va a ser el de las vertical (eje y).
- El eje cruzado va a ser el horizontal (eje x).
Los elementos se irán organizando de arriba a abajo.
Una variante es la siguiente:
flex-direction: column-reverse;
Los ejes son los mismos, pero los elementos se organizan de abajo a arriba (en el orden inverso).