Propiedad CSS flex-flow

La propiedad CSS flex-flow es una abreviatura que establece dos propiedades del contenedor flex a la vez: flex-direction (el eje a lo largo del cual se distribuyen los elementos) y flex-wrap (si los elementos permanecen en una sola línea o se dividen en varias). En lugar de escribir ambas declaraciones, se combinan en una sola línea, lo que hace que el CSS sea más conciso y la intención más clara.

Esta propiedad pertenece a las propiedades CSS3 y forma parte del módulo de diseño Flexible Box. Solo afecta a un elemento cuyo display esté establecido en flex o inline-flex; en un elemento que no sea flex no tiene efecto, y si un contenedor flex no tiene elementos flexibles no hay nada que distribuir.

Esta página cubre la sintaxis de flex-flow, qué hace cada valor y ejemplos ejecutables para cada combinación común de dirección y ajuste de línea.

Qué controla cada valor

flex-flow acepta un valor de flex-direction y un valor de flex-wrap, en cualquier orden:

flex-direction — el eje principal y el orden que siguen los elementos a lo largo de él:
- row (predeterminado) — de izquierda a derecha.
- row-reverse — de derecha a izquierda.
- column — de arriba a abajo.
- column-reverse — de abajo a arriba.
flex-wrap — qué ocurre cuando los elementos no caben en una sola línea:
- nowrap (predeterminado) — todos los elementos se comprimen en una sola línea y pueden reducirse.
- wrap — los elementos se desbordan en nuevas líneas en la misma dirección.
- wrap-reverse — los elementos se ajustan en nuevas líneas en la dirección del eje transversal opuesta.

Como el valor inicial es row nowrap, un contenedor flex sin flex-flow definido distribuye sus elementos en una sola línea horizontal.

Los navegadores modernos admiten la propiedad flex-flow de forma nativa sin prefijos de proveedor.

Valor inicial	row nowrap
Se aplica a	Contenedores flex
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.flexFlow = "column nowrap";

Sintaxis

Sintaxis de la propiedad CSS flex-flow

flex-flow: <flex-direction> || <flex-wrap>;
/* or */ initial | inherit;

Cuando establecemos flex-flow: row wrap;, el primer valor define flex-direction y el segundo define la propiedad flex-wrap. Los dos valores son independientes del orden porque aceptan palabras clave diferentes, por lo que flex-flow: wrap row; es igualmente válido. También se puede indicar solo uno de ellos; por ejemplo, flex-flow: column; deja flex-wrap en su valor predeterminado nowrap.

Ejemplo de la propiedad CSS flex-flow

flex-flow: row wrap;

El siguiente código es equivalente al código anterior.

Ejemplo de las propiedades flex-direction y flex-wrap

flex-direction: row;
flex-wrap: wrap;

Ejemplo de la propiedad flex-flow con los valores "row" y "wrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad flex-flow con los valores "wrap-reverse" y "column":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad flex-flow con los valores "row" y "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Con flex-flow: row nowrap, los seis elementos permanecen en una sola línea horizontal y se reducen para ajustarse al contenedor en lugar de dividirse en varias líneas:

Ejemplo de la propiedad flex-flow con los valores "row-reverse" y "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad flex-flow con los valores "column" y "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad flex-flow con los valores "column-reverse" y "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
flex-direction	Define la dirección de los elementos flexibles. Los valores posibles son: row row-reverse column column-reverse initial inherit	Pruébalo »
flex-wrap	Define si los elementos flexibles deben ajustarse o no. Los valores posibles son: nowrap wrap wrap-reverse initial inherit	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Cuándo usar flex-flow

Usa flex-flow siempre que necesites establecer tanto la dirección como el comportamiento de ajuste de línea de un contenedor flex. Un patrón habitual es una barra de elementos que debe aparecer en fila en pantallas anchas pero dividirse en varias líneas en pantallas estrechas: flex-flow: row wrap; lo resuelve con una sola declaración. Si solo cambias una de las dos subpropiedades, usar la forma extendida flex-direction o flex-wrap directamente puede hacer la intención más evidente. Para obtener una visión completa de cómo encajan estas propiedades, consulta la guía definitiva de Flexbox.

Práctica

¿Qué es correcto sobre la propiedad 'flex-flow' en CSS?

'flex-flow' es una propiedad abreviada para las propiedades flex-direction y flex-wrap'flex-flow' permite controlar la dirección de los elementos flexiblesEl valor predeterminado de 'flex-flow' es row-reverse'flex-flow' solo puede tener un valor a la vezEl primer valor especificado en 'flex-flow' es flex-direction y el segundo valor es flex-wrap