W3Docs

Apariencia

Español

Propiedad CSS flex-direction ​

La propiedad flex-direction especifica el eje principal de un contenedor flex y establece el orden de los elementos flex. Es una de las propiedades CSS3. Esta propiedad forma parte del módulo Flexible Box Layout.

Los elementos flex se pueden mostrar:

  • horizontalmente de izquierda a derecha (flex-direction: row) o de derecha a izquierda (flex-direction: row-reverse)
  • verticalmente de arriba a abajo (flex-direction: column) o de abajo a arriba (flex-direction: column-reverse)

INFO

Si no hay elementos flex, la propiedad flex-direction no tiene ningún efecto.

Valor inicialrow
Se aplica aContenedores flex.
HeredableNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.style.flexDirection = "row-reverse";

Sintaxis ​

Sintaxis de la propiedad CSS flex-direction

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

Ejemplo de la propiedad flex-direction: ​

Ejemplo de la propiedad CSS flex-direction con el valor column-reverse

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>
Try it Yourself »

En el siguiente ejemplo, los elementos se muestran horizontalmente en una fila de derecha a izquierda.

Ejemplo de la propiedad flex-direction con el valor "row-reverse": ​

Ejemplo de la propiedad CSS flex-direction con el valor row-reverse

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>
Try it Yourself »

Resultado ​

La siguiente imagen muestra los elementos mostrados en orden inverso de derecha a izquierda.

Propiedad CSS flex-direction

Ejemplo de la propiedad flex-direction con el valor "row": ​

Ejemplo de la propiedad flex-direction con el valor “row”

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>
Try it Yourself »

Ejemplo de la propiedad flex-direction con el valor "column": ​

Ejemplo de la propiedad flex-direction con el valor "column"

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>
Try it Yourself »

Ejemplo de la propiedad flex-direction con el valor "column-reverse": ​

Ejemplo de la propiedad flex-direction con el valor "column-reverse"

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>
Try it Yourself »

Valores ​

ValorDescripciónProbar
rowLos elementos se muestran horizontalmente en una fila. Este es el valor predeterminado de esta propiedad.Probar »
row-reverseLos elementos se muestran en una fila en orden inverso (de derecha a izquierda).Probar »
columnLos elementos se muestran verticalmente de arriba a abajo.Probar »
column-reverseLos elementos se muestran verticalmente de abajo a arriba.Probar »
initialLa propiedad utiliza su valor predeterminado.Probar »
inheritLa propiedad hereda el valor de su elemento principal.Probar »

Práctica ​

¿Cuáles de los siguientes son valores válidos para la propiedad CSS flex-direction?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.