CSS flex-basis Property

Description

The flex-basis property determines the base of the flex , which is the initial size of the element. Similar to the width and height properties to which the contents of an element are added.

Initial value
auto
Applies to
Flex items, including in-flow pseudo-elements
Inherited
No
Media
Visual
Computed value
As specified, but with relative lengths converted into absolute lengths
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.flexBasis

Syntax

flex-basis: auto | <size>

Values

  • 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.

Example

<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>
</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

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112292212.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292212.19?