×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Grow

    Lesson List

    Another property that can be applied on a flex item is the Flex Grow property. This property specifies what amount of space inside the flex container the item should take up if necessary.

    The Flex grow factor is always relative to the size of other items in the flex container.

    Flex Grow

    By default, you can see that the flex item only takes up space that is required to fit the content. so there is extra space within the container.
    Flex Display
    sometimes we don’t want the additional white space instead we want the flex items to grow to utilize the remaining space.
    By default all flex items have a flex grow the value of 0. So lets set it for one of the items and see what happens.

    style.css
    ...
    .item-3 {
        background-color: #1C4C56;
        flex-grow: 1;
    }
    ...
    

    We have set the flex-grow: 1 to 3rd item so the third item will utilize the extra whitespace.

    Note:
    To make all items equal we can add the same flex-grow value to every flex-items.

    Flex Item Grow equal

    Flex Grow With Extra Space

    If we add similar flex-grow value then space will equally be distributed with two items containing the flex-grow property.
    We can also give different space for the items containing the property just by increasing the integer value.

    style.css
    ...
    .item-6 {
        ...
        flex-grow: 1;
    }
    .item-7 {
        ...
        flex-grow: 3;
    }
    ...
    

    Flex Item Grow different
    now the item-7 is taking 3x extra space as much as item-6.

    Note:
    The property also accepts the decimal values, but make sure you don’t put the negative value.

    Demo

    See the Pen
    Flex Grow
    by rehmaanali (@geekstrick)
    on CodePen.


    Conclusion

    So the property dictates what amount of the available space inside the flex container the items should take up.
    Flex grow factor is also relative to the other items in the container. by default value is 0 which dictates the items should not grow.
    Setting a value of 1 on all the flex items will cause the flex item to grow even when there is additional space in the container.

    Flex Grow Property
    .
    .
  • We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept