flex-flow

Resumen

La propiedad CSS flex-flow  es una propiedad atajo para las propiedades individuales flex-direction y flex-wrap.

Valor inicialas each of the properties of the shorthand:
Applies toflex containers
Heredableno
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete

Para más propiedades e información ve Utilizando cajas flexibles CSS.

Sintaxis

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* valores globales */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

Valores

Ve flex-direction y flex-wrap para más detalles de los valores.

Sintaxis formal

<'flex-direction'> || (en-US) <'flex-wrap'>

Ejemplos

element {
  /* Main-axis es la dirección de bloque con main-start y main-end opuesto. Los artículos flex se distribuyen en múltiples líneas */
  flex-flow: column-reverse wrap;
}

Especificaciones

Especificación Estado Comentario
CSS Flexible Box Layout Module
La definición de 'flex-flow' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad de navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte básico 28.0 21.0-webkit (en-US)
29.0
11 12.10 6.1-webkit (en-US)
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soporte básico 28.0 ? 11 12.10 7.1-webkit (en-US)

Ver también