flex-flow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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 typeas each of the properties of the shorthand:

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

Sintaxis

css
/* 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-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap        |
  wrap          |
  wrap-reverse

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

Specification
CSS Flexible Box Layout Module Level 1
# flex-flow-property

Compatibilidad con navegadores

Ver también