Existen en CSS Flexbox dos propiedades principales para manipular la dirección y comportamiento de los ítems a lo largo del eje principal del contenedor.
| Propiedad | Valor | Significado |
|---|---|---|
flex-direction | row | row-reverse | column | column-reverse | Cambia la orientación del eje principal. |
Mediante la propiedad flex-direction podemos modificar la dirección del eje principal del contenedor para que se oriente en horizontal (por defecto) o en vertical. Además, también podemos incluir el sufijo -reverse para indicar que coloque los ítems en orden inverso.
Veamos el significado de cada valor de la propiedad.
| Valor | Descripción |
|---|---|
row | Establece la dirección del eje principal en horizontal. |
row-reverse | Establece la dirección del eje principal en horizontal (invertido). |
column | Establece la dirección del eje principal en vertical. |
column-reverse | Establece la dirección del eje principal en vertical (invertido). |
Todo ello permite tener un control muy alto sobre el orden de los elementos en una página.
Ejm
.container {
display: flex;
flex-direction: column;
background: steelblue;
}
.item {
background: grey;
}