CSS Flexbox - flex-basis Property

CSS flex-basis property sets the initial size of a flex item on the main axis before distributing the remaining space among the flex items.

When an element has both flex-basis (other than auto) and width (or height in the case of flex-direction: column), flex-basis takes precedence.

Possible Values

  • <width> − A specific length value such as pixels (px), percentage (%) etc.

  • auto − The width value in horizontal writing mode and the height value in vertical writing mode; when both values are auto, the content value is used.

  • max-content − This value sets the intrinsic preferred width.

  • min-content − This value sets the intrinsic minimum width.

  • fit-content − Sets the maximum size of a container's content area, constrained between min-content and max-content, and determined by the content of the element.

  • content − It shows automatic sizing based on the content of the flex item.

Applies to

Flex items, including in-flow pseudo-elements

Syntax

<width>

flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

Intrinsic sizing keywords

flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

Automatically size based on the flex item's content 

flex-basis: content;

CSS flex-basis - <width> Value

The following example demonstrates that flex-basis: 200px property sets the the initial size of the third flex item to the 200px −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: 200px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis - auto Value

The following example demonstrates that flex-basis: auto property sets the the initial size of its content −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: auto;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis - max-content Value

The following example demonstrates that flex-basis: max-content property sets the the initial size of the third flex item to the size of its content −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: max-content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis - min-content Value

The following example demonstrates that flex-basis: min-content property sets the the initial size of the third flex item to the minimum size required to contain its content −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: min-content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis - fit-content Value

The following example demonstrates that flex-basis: fit-content property sets the the initial size of the third flex item to the size of its contents −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: fit-content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis - content Value

The following example demonstrates that flex-basis: content property automatically determines its initial size based on the size of the flex item −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>
Advertisements