Definición de .flex-flow aplicado en CSS
La propiedad .flex-flow es una subproperiedad del módulo de diseño de caja flexible. Es una taquigrafía para la dirección flexible y la envoltura flexible.
Ejemplo de empleo de flex-flow
Si te gustaría utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:
.element {
flex-flow: row wrap;
}Otro ejemplo más avanzado de .flex-flow es el siguiente de CODEPEN:
Sintaxis de .flex-flow en CSS
flex-flow: flex-direction flex-wrap|initial|inherit;Valores
| Valor | Descripción | Juegalo |
|---|---|---|
| dirección de flexión | Valores posibles: fila fila-reversa columna columna inversa inicial heredar El valor predeterminado es "fila". Especificación de la dirección de los elementos flexibles | |
| envoltura flexible | Valores posibles: ahora rap envolver envolver-reversa inicial heredar El valor predeterminado es "ahora". Especificar si los artículos flexibles deben envolverse o no | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .flex-flow
Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| flex-grow | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
Referencias técnicas
- CSS Flexible Box Layout Module Level 1
- MDN documentation
- Advanced cross-browser flexbox
- A guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
