이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

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.




flex-basis: <'width'>

Property values

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


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

CSS information

Applies Toflex items
Initial Valueauto


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)



© 2014 Microsoft