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 septiembre de 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 |