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
11	12	29	22	12.1	9
Tablets / Mobile
4.4	29	22	12.1	9	2.0

Last updated by CSSPortal on: 4th November 2019