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 inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | flex containers |
Heredable | no |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as 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
BCD tables only load in the browser