CSS Reference Manual

CSS @rules

Comprehensive List of CSS Properties

CSS3 flex-basis attribute CSS empty-cells attribute

CSS3 Usage and examples of the flex property

The flex CSS property specifies the components of the flexible length. It is used to setflex-grow,flex-shrinkandflex-basisAbbreviated attribute.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

Default value:	0 1 auto; View all properties
Applies to:	Flexible element
Inheritance:	No
Animatable:	Yes, because each property of the shorthand is animatable.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.flex="1"

Syntax of flex usage

The syntax of this attribute is as follows:

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

The following examples demonstrate how to use the flex property.

Example

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

Test and see‹/›

Attribute value

The following table describes the value of this property.

Value	Description
flex-grow	Specify the grow factor or positive elasticity of the flexible element.
flex-shrink	Specify the shrink factor or negative elasticity of the flexible element.
flex-basis	Specify the initial size of the flexible element.
none	Is equivalent to setting flex to 0 0 auto.
auto	Is equivalent to setting flex to1 1 auto.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the flex properties of their parent elements.

Browser compatibility

Browser compatibility of flex properties, the numbers in the table below represent the minimum version number of browsers that support this property; all mainstream browsers support this property.

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

For further reading

Please refer to the following tutorial:CSS3Multi-column layout.

CSS3 flex-basis attribute CSS empty-cells attribute