flex-basis
Quick Summary for flex-basis
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
Code Usage for flex-basis
/* Specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto;  /* Intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content;  /* Automatically size based on the flex item's content */ flex-basis: content;  /* Global values */ flex-basis: inherit; flex-basis: initial; flex-basis: revert; flex-basis: unset; 
More Details for flex-basis

flex-basis

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

In this example the flex-grow and flex-shrink properties are both set to 1 on all three items, indicating that the flex item can grow and shrink from the initial flex-basis.

The demo then changes the flex-basis on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the flex-basis of the first item is 200px, it will start out at 200px but then shrink to fit the space available with the other items being at least min-content sized.

The image below shows how the Firefox Flexbox Inspector helps you understand the size items become:

Note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.

Syntax

/* Specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto;  /* Intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content;  /* Automatically size based on the flex item's content */ flex-basis: content;  /* Global values */ flex-basis: inherit; flex-basis: initial; flex-basis: revert; flex-basis: unset; 

The flex-basis property is specified as either the keyword content or a <'width'>.

Values

<'width'>

An absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto. Negative values are invalid. Defaults to auto.

content

Indicates automatic sizing, based on the flex item's content.

Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size (width or height) of auto.

Originally, flex-basis:auto meant "look at my width or height property". Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922. Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).

Formal definition

Initial valueauto
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Percentagesrefer to the flex container's inner main size
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea length, percentage or calc();

Formal syntax

content | <'width'>

Examples

Setting flex item initial sizes

HTML
<ul class="container">   <li class="flex flex1">1: flex-basis test</li>   <li class="flex flex2">2: flex-basis test</li>   <li class="flex flex3">3: flex-basis test</li>   <li class="flex flex4">4: flex-basis test</li>   <li class="flex flex5">5: flex-basis test</li> </ul>  <ul class="container">   <li class="flex flex6">6: flex-basis test</li> </ul> 
CSS
.container {   font-family: arial, sans-serif;   margin: 0;   padding: 0;   list-style-type: none;   display: flex;   flex-wrap: wrap; }  .flex {   background: #6AB6D8;   padding: 10px;   margin-bottom: 50px;   border: 3px solid #2E86BB;   color: white;   font-size: 14px;   text-align: center;   position: relative; }  .flex:after {   position: absolute;   z-index: 1;   left: 0;   top: 100%;   margin-top: 10px;   width: 100%;   color: #333;   font-size: 12px; }  .flex1 {   flex-basis: auto; }  .flex1:after {   content: 'auto'; }  .flex2 {   flex-basis: max-content; }  .flex2:after {   content: 'max-content'; }  .flex3 {   flex-basis: min-content; }  .flex3:after {   content: 'min-content'; }  .flex4 {   flex-basis: fit-content; }  .flex4:after {   content: 'fit-content'; }  .flex5 {    flex-basis: content; }  .flex5:after {   content: 'content'; }  .flex6 {   flex-basis: fill; }  .flex6:after {   content: 'fill'; } 
Results

Specifications

Specification
CSS Flexible Box Layout Module Level 1 # flex-basis-property

See also

CSS Flexbox Guide: Basic Concepts of Flexbox CSS Flexbox Guide: Controlling Ratios of flex items along the main axis width Select your preferred language English (US)EspañolFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


James Clear
Random CSS Property

unicode-bidi

The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.
unicode-bidi css reference