flex-basis#

#Introduction

The flex-basis CSS property sets the initial main size of a flex item. 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.

#Examples

css-apisrc/flex-basis/App.tsx

Preview

#Syntax

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

#Values

• auto

  Default value. refer to width and height.

• <length>

  sets an absolute value.

• <percentage>

  sets a percentage of the width or height of a containing block's content area.

#Formal definition

#Formal syntax

flex-basis = auto | <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

#Difference with the web

• Not under box-sizing influence.

#Compatibility