flex

Resumen

 

La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y 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:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

 

Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.

Sintáxis

/* 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
La definición de 'flex' en esta especificación.		 Candidate Recommendation Initial definition

Compatibilidad de Navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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