Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

CSS flex-basis Property

The flex-basis property sets the initial width of a flex item.

Flex items are elements inside a flex container.

Example

#

Three flex items with different flex-basis values.

1
2
3
<style>
  .flex-basis {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }
  .flex-basis > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-basis">
  <div style="flex-basis: 120px">1</div>
  <div style="flex-basis: 80px">2</div>
  <div style="flex-basis: 50px">3</div>
</div>  

Syntax

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

Values

#

Value Description
auto Default. Item widths will be according to their content.
length Length unit. Any valid CSS length value.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different flex-basis values.

1
2
  3  

<style>
  .flex-contain {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-contain > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    flex-basis: 120px;
  }

div.flex-basis-example{
  flex-basis: auto;
}
</style>

<div class="flex-contain">
  <div>1</div>
  <div>2</div>
  <div class="flex-basis-example">
     &nbsp;&nbsp;3&nbsp;&nbsp;
  </div>
</div>

Browser support

This table shows when flex-basis support started for each browser.

Chrome
29.0 Aug 2013
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
17.0 Aug 2013
Safari
9.0 Sep 2015

You may also like

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides