flex

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

 

La propiedad CSS flex es una propiedad resumida que especifica la capacidad de un elemento flexible para alterar sus dimensiones para llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

Valor inicialas each of the properties of the shorthand:
Applies toflex items, including in-flow pseudo-elements
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animatableas each of the properties of the shorthand:
  • flex-grow: yes, as a number
  • flex-shrink: yes, as a number
  • flex-basis: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Canonical orderorder of appearance in the formal grammar of the values

 

Consulte como Usar las cajas felxibles de CSS para más propiedades e información .

Sintaxis

/* 0 0 auto */
flex: none;

/* Un valor, número sin unidades: flex-grow */
flex: 2;

/* Un valor, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Dos valores: flex-grow | flex-basis */
flex: 1 30px;

/* Dos valores: flex-grow | flex-shrink */
flex: 2 2;

/* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Valores globales */
flex: inherit;
flex: initial;
flex: unset;

Valores

<'flex-grow'>

Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

<'flex-shrink'>
Define el flex-shrink del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
<'flex-basis'>
Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades  width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
none
Esta palabra clave se computa a 0 0 auto.

Sintaxis normal

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Ejemplo

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}
<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

Resultado

Especificaciones

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex' in that specification.
Candidate Recommendation Initial definition

Compatibilidad de Navegadores

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit
29.0
10.0-ms[3]
11.0[3]
12.10

6.1-webkit
9.0

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? 4.4 11 12.10 7.1-webkit

[1] En Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) y 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) el soporte de cajas flexibles está oculto en las preferencias about:config en layout.css.flexbox.enabled, por defecto en false.

[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).

[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de calc() en la parte flex-basis de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver Flexbug #8 para más info. Además una declaración flex  con un valor sin unidad en su parte flex-basis es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte flex-basis del valor abreviador flex. Ver Flexbug #4 para más info.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: joshitobuba, Enfokat
 Última actualización por: joshitobuba,