CSS - flex-basis Property

Quiz

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. The items must be flexible in order for the property to show its effect.

Syntax

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

Property Values

Value	Description
auto	The length is equal to length of flexible item. If the item does not have its own length then the length will be according to the content. Default.
number	The initial length of the flexible item can be specified in length values (px,%,em etc.)
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Flex Basis Property

The following examples explain the flex-bais property with different values.

Flex Basis Property with Auto Value

To let the size of a flexible item be either a specific length or automatically adjusted based on its content if no specific length is given, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         background-color: lightgray;
         padding: 10px;
      }

      .item {
         color: white;
         background-color: #4CAF50;
         border: 1px solid black;
         padding: 10px;
      }

      .item1 {
         width: 180px;
         flex-basis: auto;
      }

      .item2 {
         flex-basis: auto;
      }

      .item3 {
         width: 150px;
         flex-basis: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-basis property
   </h2>
   <h4>
      flex-basis: auto (Item1-180px,
      Item3-150px)
   </h4>
   <div class="container">
      <div class="item item1">
         Item 1
      </div>
      <div class="item item2">
         Item 2
      </div>
      <div class="item item3">
         Item 3
      </div>
   </div>
</body>

</html>

Flex Basis Property with Length Values

The initial length of a flexible item can be set using length values (e.g. 10px, 20%, 30em etc.). The item's length will change according to the value specified. The length value using percentage determines the size relative to the size of the container. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         background-color: lightgray;
         padding: 10px;
      }

      .item {
         color: white;
         background-color: #4CAF50;
         border: 1px solid black;
         padding: 10px;
      }

      .item1 {
         flex-basis: 200px;
      }

      .item2 {
         flex-basis: 60%;
      }

      .item3 {
         flex-basis: 35em;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-basis property
   </h2>
   <h4>
      flex-basis: Item1-100px, Item2-50%,
      Item3-45em
   </h4>
   <div class="container">
      <div class="item item1">
         Item 1
      </div>
      <div class="item item2">
         Item 2
      </div>
      <div class="item item3">
         Item 3
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex-basis	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page