flex-basis property

Specifies the initial main size of the flex item.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name flex-basis, which is preferred for better standards compliance and future compatibility.

This property is read/write.

IE11

Syntax

flex-basis: <'width'>

Property values

To set the initial main size of the flex item, use the following.

'width'

Width as specified by a number, followed by a length unit. Negative numbers are invalid.

CSS information

Applies Toflex items
Mediavisual
Inheritedno
Initial Valueauto

Remarks

The flex-basis property specifies the initial main size of the flex item before free space is distributed. The initial main size is a flex item's width or height along the main (primary) axis. The initial value is auto, which retrieves the value of the main size of the flex container.

This property can also be specified within the shorthand flex property.

Examples

In the following example, there are three flex items inside of the flex container.



<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>


Below, values for flex-basis are specified for each of the three flex items. The first flex item has a flex-basis value of 300px. This sets the initial size of the flex item to 300px. The second flex item has a flex-basis value set to 30%. The third flex item does not have a flex-basis value set, so the initial value, auto, is used. In this example, auto uses the value that is set for the flex item’s width which in this example is 120px. This can be seen in the image below.

An image displaying the flex-basis property


#flexContainer {
   display: flex;  	
} 
#item1 {
   background: #66CC33;
   flex-basis: 300px;
}
#item2 {
   background: #0099FF;
   flex-basis: 30%;
}
#item3 {
   width: 120px;
   background:#66CC33;
}


Requirements

See also

CSSStyleDeclaration
Flexible box layout (Windows)
flex

 

 

Show:
© 2014 Microsoft. All rights reserved.