Atributo flex-direction de CSS

Definición y uso

La propiedad flex-direction define la dirección de los elementos elásticos.

Notas:Si el elemento no es un proyecto elástico, la propiedad flex es inválida.

Vea también:

Tutorial de CSS:Cuadro flexible de CSS

Manual de CSS:Atributo flex

Manual de CSS:Atributo flex-basis

Manual de CSS:Atributo flex-flow

Manual de CSS:Atributo flex-grow

Manual de CSS:Atributo flex-shrink

Manual de CSS:Atributo flex-wrap

Manual de HTML DOM:Atributo flexDirection

Ejemplo

Establece la dirección de los elementos flexibles dentro del elemento <div> en orden inverso:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Prueba personalmente

Sintaxis de CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Valor del atributo

Valor Descripción
row Valor predeterminado. Como una fila, muestra horizontalmente los elementos flexibles.
row-reverse Iguales filas, pero en dirección opuesta.
column Como columnas, muestra verticalmente los elementos flexibles.
column-reverse Iguales columnas, pero en dirección opuesta.
initial Establezca este atributo en su valor predeterminado. Vea initial.
inherit Hereda este atributo de su elemento padre. Vea inherit.

Detalles técnicos

Valor predeterminado: row
Herencia: No
Creación de animaciones: No soportado. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.flexDirection="column-reverse"

Más ejemplos

Combine flex-direction y consultas de medios para crear diferentes disposiciones para diferentes tamaños de pantalla/dispositivos:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Diseño responsive - crea una disposición en una columna (100％) en lugar de una disposición en dos columnas (50％) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit- o -moz- indican la primera versión que utiliza el prefijo.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0