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

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";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <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>
    </div>
  </body>
</html>

Values

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
29.0+
21-28 -webkit- 		10.0+ -ms- 12.0+ 28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Prev
Next

Related articles