Definición de .flex-direction en CSS
La propiedad .flex-direction es una subproperiedad del módulo de diseño de caja flexible. Establece el eje principal, definiendo así la dirección Los elementos FLEX se colocan en el contenedor flexible.
Caso de uso de la propiedad flex-direction
Si quieres emplear esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:
.element {
flex-direction: column-reverse;
}Otro ejemplo más avanzado de .flex-direction es el siguiente de CODEPEN:
Sintaxis de .flex-direction en CSS
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;Valores
| Valor | Descripción | Juegalo |
|---|---|---|
| fila | Valor por defecto. Los elementos flexibles se muestran horizontalmente, como una fila | |
| fila-reversa | Igual que la fila, pero en orden inverso | |
| columna | Los elementos flexibles se muestran verticalmente, como una columna | |
| columna inversa | Igual que la columna, pero en orden inverso | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .flex-direction
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| flex-flow | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
