flex-basis property

Specifies the initial main size of the flex item.

This property is read/write.




flex-basis: content | <'width'>

Property values

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


Indicates that the flex basis is automatically-determined based on the flex item's content.


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

CSS information

Applies Toflex items
Initial Valueauto


As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.

As of Microsoft Edge, the content value for flex-basis is supported.

As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports "-webkit-flex-basis" as an alias for this property.

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.


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>

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;


See also

Flexible box layout (Windows)