CSS | flex-basis Property

The flex-basis property in CSS is a used to specify the initial size of the flexible item. The flex property is not used if the element is not flexible item.

Syntax:

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

Property Values:

  • number: It is a length unit that define the initial length of that item.
  • auto: It is the default value, if the length is not specified the length will be according to it’s content.
  • initial: It sets the property to it’s default value.
  • inherit: It specifies that a property should inherit its value from its parent element.
  • Example 1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <style>
            .Geeks {
                width: 385px;
                height: 70px;
                display: flex;
            }
              
            .Geeks div {
                flex-grow: 0;
                flex-shrink: 0;
                flex-basis: 80px;
                  
                /* For Safari 6.1 and above browsers */
                -webkit-flex-grow: 0; 
                -webkit-flex-shrink: 0;
                -webkit-flex-basis: 80px;
            }
              
            .Geeks div:nth-of-type(2) {
                flex-basis: 50%;
            }
            .Geeks div:nth-of-type(3) {
                flex-basis: auto;
            }
            .Geeks div:nth-of-type(4) {
                flex-basis: initial;
            }
            .Geeks div:nth-of-type(5) {
                flex-basis: inherit;
            }
        </style>
    </head>
      
    <body>
        <center>
              
            <h1>
                The flex-basis Property
            </h1>
              
            <div class = "Geeks">
                  
                <div style = "background-color:green;">
                    number 80px
                </div>
                  
                <div style = "background-color:lightgreen;">
                    percentage
                </div>
                  
                <div style = "background-color:green;">
                    auto
                </div>
                  
                <div style = "background-color:lightgreen;">
                    initial
                </div>
                  
                <div style = "background-color:green;">
                    inherit
                </div>
            </div
              
        </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    Example 2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <style>
            .Geeks {
                width: 560px;
                height: 100px;
                border: 1px solid black; 
                display: flex;
            }
              
            .Geeks div {
                flex-grow: 0;
                flex-shrink: 0;
                flex-basis: 80px;
            }
            .Geeks div:nth-of-type(2) {
                flex-basis: 200px;
            }
            .Geeks div:nth-of-type(5) {
                flex-basis: 120px;
            }
            h3{
                color:Green;
            }
        </style>
    </head>
      
    <body>
        <center>
              
            <h1>
                The flex-basis Property
            </h1>
              
            <div class = "Geeks">
                <div style="background-color:green">
                    80px
                </div>
                  
                <div style="background-color:lightgreen">
                    GeeksforGeeks <br>200px
                </div>
                  
                <div style="background-color:green">
                    80px
                </div>
                  
                <div style="background-color:lightgreen">
                    80px
                </div>
                  
                <div style="background-color:green">
                    120px
                </div>
            </div
        </center>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    Supported Browsers: The browser supported by flex-basis property are listed below:

    • Google Chrome 29.0, 21.0 -webkit-
    • Internet Explorer 11.0
    • Mozilla Firefox 28.0, 18.0 -moz-
    • Safari 9.0, 6.1 -webkit-
    • Opera 17.0


    My Personal Notes arrow_drop_up


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.