CSS flex-basis Property


The flex-basis CSS property determines the initial size of a flex item along the main axis within a flex container. It defines the ideal width or height of the item before any available space is distributed among the items. It can be set using various units like pixels, percentages, or content-based measurements. When used in combination with flex-grow and flex-shrink, flex-basis helps control how space is allocated to flex items within a flex container, making it a key component of flexible and responsive layouts in CSS.

Initial value
Applies to
Flex items, including in-flow pseudo-elements
Computed value
As specified, but with relative lengths converted into absolute lengths
JavaScript syntax

Interactive Demo

Item 1
Item 2
Item 3


flex-basis: auto | <size>


  • autoIndicates auto size based on the content of the item.
  • <size>Specifies the size of the element in px, mm, pt or in percent along the main axis. In this case, the size is calculated relative to the parent. A negative value is not valid.


<div class="flex-container"> 
<div class="flex-item one">First</div>
<div class="flex-item two">Second</div>
<div class="flex-item three">Third</div>
.flex-container { 
   display: flex;
   height: 300px;
   color: #fff;
   font-size: 2em;
   flex-flow: column wrap;
.flex-item { 
   display: flex;
   align-items: center; 
   justify-content: center;
.one { 
   background: #508694;
   margin-right: 10px;
   flex-basis: 100%; 
   order: 1;
.two { 
   background: #BB844C;
   margin-bottom: 10px;
   flex: 1 1 0; 
   order: 2;
.three { 
   background: #929D79; 
   flex: 1 1 0; 
   order: 3; 

Browser Support

The following table will show you the current browser support for the CSS flex-basis property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024