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
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

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'> || <'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!

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

Ver también