
La propiedad flex-flow utiliza una propiedad abreviada de CSS para establecer el valor de flex-direction
y flex-wrap
.
Funciones flex-flow css
Valor inicial | Para cada valor corto:flex-direction : row flex-wrap : nowrap |
---|---|
Aplicado a | Contenedores flexibles. |
Heredable | No |
Móvil | No |
Valor calculado | Para cada valor corto:flex-direction : Como se especificó.flex-wrap : Como se especificó. |
/* 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> y <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;
Ejemplos y aplicaciones en código
Consulte las propiedades de la página flex-direction
y flex-wrap
ejemplos detallados de su uso.
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 29,0 | 20,0 | 11 | 12,5 | 9.0 |
Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-
o -ms-
).
Características general
La propiedad acepta flex-flow
uno o dos de los siguientes valores.
<flex-direction>
Este valor define cuál es el eje principal en el contenedor flexible y su orientación. Consulte la página de funciones flex-direction
para obtener más información.
<flex-wrap>
Esta propiedad especifica si los elementos flexibles deben estar contenidos en una sola línea o pueden ajustarse a varias líneas. Consulte la página de funciones flex-wrap
para obtener más información.
Estructura flex-flow css
flex-flow: <'flex-direction'> || <'flex-wrap'>;
Consulte también
- Página de sub-propiedades que esta conjuntos de propiedades son:
flex-basis
,flex-direction
,flex-grow
,flex-shrink
yflex-wrap
. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento. - La página de propiedades
position
que describe cómo se debe colocar el elemento en el documento.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS