CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS3 flex-direction Attribute CSS3 flex Attribute

CSS3 flex-Usage and examples of the basis attribute

flex-The initial base value of the elastic element specified by the basis CSS property

The table below provides usage instructions and version history for this attribute, as well as the usage syntax in the JavaScript script.

Default Value:	auto
Applies To:	Flexible Items
Inheritance:	No
Animatable:	Yes.Please refer to Animation Attributes.
Version:	CSS3new feature
JavaScript Syntax:	object.style.flexBasis="180px"

flex-basis Syntax

The syntax of this attribute is as follows:

flex-basis:　width　|　auto　|　initial　|　inherit

The following examples demonstrate how to use flex-basis Attribute.

Example

.flex-container　{
　　　　display:　flex;　　　　　　
}　
.item1　{
　　　　background:　#ff80c0;
　　　　-webkit-flex-basis:　300px;　/*　Safari　6.1+　*/
　　　　flex-basis:　300px;
}
.item2　{
　　　　background:　#8080ff;
　　　　-webkit-flex-basis:　30%;　/*　Safari　6.1+　*/
　　　　flex-basis:　30%;
}
.item3　{
　　　　width:　120px;
　　　　background:#0080ff;
}

Test and see‹/›

Attribute Value

The table below describes the value of this attribute.

Value	Description
width	Length represented by an absolute or relative unit, used to specify the initial length of the flexible item. Negative values are invalid.
auto	The width of the flexible item is equal to itswidthThe value of the attribute. If the width is not specified for the flexible item, the width will depend on its content. This is the default value.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the flex of their parent element-basis Attribute Values.

Browser Compatibility

flex-Browser Compatibility of basis Attribute, the numbers in the table below represent the minimum version of the browser that supports this attribute; all mainstream browsers support this attribute.

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