CSS flex-basis

The CSS flex-basis property is used to set the initial length of flex items in flex container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;
         flex-basis: 50px;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS flex-basis Syntax

The syntax of flex-basis property in CSS, is:

flex-basis: x;

The value of x should be any of the following:

length - used to create custom size initial length of flex item(s)
auto - used to create length based on the item's content. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS flex-basis to Change Initial Length of Particular Flex Item

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
      #secondiv{flex-basis: 120px;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »