InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS3 flexbox

    Flexbox container properties

    • display:flex and inline-flex
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    Flexbox items properties

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

    Flexbox cookbooks

    • CSS flexbox - align div vertically and horizontally in center
     
    • Home
    • > Tutorials
    • > CSS
    • > CSS properties
    • > CSS3 flexbox

    CSS flex-grow – grow flex item if needed

    on Sep 9, 2016

    CSS flex-grow property lets a flex item to grow if needed. Its initial value is 0. That mean by default flex item does not grow. It can take any positive value. All flex items grow in proportion of their flex-grow value.

    Syntax:

    .someflexcontainer {
      display: flex;
    }
    .flexitem {
      flex-grow: 1;
    }

    CSS property flex-grow

    CSS version: CSS 3
    Value: number
    Initial: 0
    Applies to: flex items
    Inherited: no

    Example – flex-grow

    In the following code, CSS property flex-grow can be changed to the following values
    • 0
    • 1
    <style>
    .fbox {
      display: flex;
      width: 250px; background-color:gray;
    }
    .child {
      background-color:green;
      padding: 3px; margin: 3px;
      flex-grow: 0;
    }
    </style>
    
    <div class=fbox>
    <div class="child">div1</div>
    <div class="child">div2</div>
    <div class="child">div3</div>
    </div>
    flex-grow refresh done
    try it online

    Specification and Browser compatibility

    SpecificationStatusCategories
    Flexible Box Layout ModuleW3C Working DraftCSS3
    Desktop
    ChromeFirefoxIEEdgeSafariOpera
    Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
    Mobile
    Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
    Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
    source: caniuse.com

    Suggested posts:

    1. CSS flex – shorthand for flex-grow, flex-shrink and flex-basis
    2. CSS flex-shrink – shrink flex item if needed
    3. CSS flex-basis
    4. CSS align-self – override align-items for flex-item
    5. CSS flex-wrap
    6. CSS flexbox – display flex and inline-flex
    7. CSS flex-flow – flex direction and wrap shorthand
    8. CSS flex-direction – flexbox container ordering and orientation
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS properties, CSS3 flexbox, Tutorials

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress