manual de referencia CSS

regla CSS (RULES)

大全 de propiedades CSS

CSS3 flex-Atributo basis CSS vacío-Atributo cells

CSS3 Métodos y ejemplos de uso de la propiedad flex

La propiedad CSS de flex especifica los componentes de longitud flexible. Es utilizada para establecer simultáneamenteflex-grow，flex-shrinkyflex-basisAtributo de abreviatura

La tabla a continuación proporciona la descripción de uso y el historial de versiones de este atributo, así como la sintaxis de uso en el script de JavaScript.

Valor predeterminado：	0 1 auto; Ver todos los atributos
Adecuado para：	Elemento flexible
Herencia：	No
Animable:	Sí, porque cada atributo de apuntes es animable.Por favor, consulte Atributos de animación。
Versión：	CSS3nuevas características
JavaScript sintaxis：	object.style.flex="1"

Sintaxis de uso de flex

La sintaxis de este atributo es la siguiente：

flex:　[　flex-grow　flex-shrink　flex-basis　]　|　none　|　auto　|　initial　|　inherit

El siguiente ejemplo muestra cómo usar el atributo flex.

Ejemplo

.flex-container　{
　　　　-webkit-flex:　1;　/*　Safari　6。1+　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　　　　　flex:　1;　
}

Prueba y mira‹/›

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
flex-grow	Especificar el coeficiente de expansión elástico o la elasticidad positiva del elemento flexible.
flex-shrink	Especificar el coeficiente de contracción elástico o la elasticidad negativa del elemento flexible.
flex-basis	Especificar el tamaño inicial del elemento flexible.
none	Equivalente a establecer flex a 0 0 auto。
auto	Equivalente a establecer flex a1 1 auto。
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos asociados adoptan los valores de atributos flex del elemento padre.

Compatibilidad del navegador

La compatibilidad del navegador del atributo flex, los números en la tabla a continuación representan la versión mínima del navegador que admite este atributo; todos los navegadores populares admiten este atributo.

	Firefox 18+ ^-moz-，28 Google Chrome 21+ ^-webkit-，29 Internet Explorer 10+ ^-ms-，11 Apple Safari 6。1+ ^-webkit- Opera 12。1+

Leer más

Por favor, consulte el siguiente tutorial：CSS3Diseño de múltiples columnas。

Atributos relacionados：align-content，align-items，align-self，display，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 flex-Atributo basis CSS vacío-Atributo cells