What are the differences between flex-basis and width in Flexbox ?

This article describes the difference between the flex-basis and width property along with examples of usage. The flex-basis property defines the initial size of flex-items depending upon the flex-direction value. It has the following additional properties that can change its behaviour:

The flex-direction value can be set to row or column. If its value is row, it defines the width and if its value is column, it defines the height.
The flex-basis property can be applied only to flex-items and width property can be applied to all.
When using flex property, all the three properties of flex-items i.e, flex-row, flex-shrink and flex-basis can be combined into one declaration, but using width, doing the same thing would require multiple lines of code.
If flex-direction value is set to be column, then for sizing flex-items horizontally width property is used.

The below examples show the differences between flex-basis and the width and height property:

Example 1: Using flex-basis when flex-direction is set to row.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>FlexBox</title> 
    <style> 
        body { 
            background: #eee; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .wrapper { 
            width: 100%; 
            margin: 0 auto; 
        } 
  
        .flex-container { 
            display: flex; 
            background: #fff; 
            flex-wrap: wrap; 
            flex-direction: row; 
        } 
  
        .box { 
            /* 
      Since flex-direction is set to 
      row therefore flex-basis defines  
      the width. Either of the width 
      property or flex-basis property 
      can be used as both perform 
      a similar task in this case. 
      */ 
  
            height: 100px; 
            flex-basis: 600px; 
        } 
  
        .one { 
            background: red; 
        } 
  
        .two { 
            background: blue; 
        } 
  
        .three { 
            background: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <h2>Flex-basis vs Width </h2> 
    <br> 
    <div class="wrapper"> 
        <div class="flex-container"> 
            <div class="box one"></div> 
            <div class="box two"></div> 
            <div class="box three"></div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: Using flex-basis when flex-direction is set to column.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>FlexBox</title> 
    <style> 
        body { 
            background: #eee; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .wrapper { 
            width: 100%; 
            margin: 0 auto; 
        } 
  
        .flex-container { 
            display: flex; 
            background: #fff; 
            flex-wrap: wrap; 
            flex-direction: column; 
        } 
  
        .box { 
            /*  
      Since flex-direction is set to 
      column therefore flex-basis defines  
      the height and hence overrides the 
      height property. The height of 
      flex-item will therefore be 80px. 
      The width property has to be separately 
      assigned a horizontal width. 
      */ 
  
            height: 100px; 
            width: 100px; 
            flex-basis: 80px; 
        } 
  
        .one { 
            background: red; 
        } 
  
        .two { 
            background: blue; 
        } 
  
        .three { 
            background: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <h2>Flex-basis vs Width </h2> 
    <br> 
    <div class="wrapper"> 
        <div class="flex-container"> 
            <div class="box one"></div> 
            <div class="box two"></div> 
            <div class="box three"></div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

My Personal Notes

HTML

HTML

Recommended Posts: