This is an important message requiring you to make a choice if you're based in the EU.

CSS flex-basis Property

The flex-basis property defines the initial main size of the flexible item. When the flex-basis property is not included, its value is set to 0%.

The flex-basis property is one of the CSS3 properties.

If there are no flexible items,flex-basis property won't have any effect.

Initial Value auto
Applies to Flex items, including in-flow pseudo-elements.
Inherited No.
Animatable Yes. Items are animatable.
Version CSS3
DOM Syntax object.style.flexBasis = "100px";


flex-basis: number | auto | initial | inherit;


<!DOCTYPE html>
    <title>Title of the document</title>
      .box {
      width: 300px;
      height: 80px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      .box div {
      -webkit-flex-grow: 0; /* Safari 6.1+ */
      -webkit-flex-shrink: 0; /* Safari 6.1+ */
      -webkit-flex-basis: 50px; /* Safari 6.1+ */
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 40px;
      .box div:nth-of-type(2) {
      -webkit-flex-basis: 150px; /* Safari 6.1+ */
      flex-basis: 140px;
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #ccc;">40px</div>
      <div style="background-color: #666;">40px</div>


Value Description
number Specifies the length of the item by "auto", "inherit", or a number followed by "%", "px", "em" etc.
auto This value is the default value of this property. Length is equal the flexible item's length. If there is no specified item length, it will be according to its content.
initial Sets the property to its default value.
inherit Inherits this property from its parent element.

Browser support

21-28 -webkit-
12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-

Do you find this helpful?

Related articles