SHARE

Hey gang, in this CSS Flexbox tutorial, I’ll show you how we can use the flex-grow property to allow our flex elements to grow into all of the space available to them. Flex grow is essentially the rate at which elements can grow in relation to their sibling flex elements.

—– COURSE LINKS:
+ Source files on GitHub – https://github.com/iamshaunjp/css-flexbox-playlist
+ Brackets editor – https://brackets.io/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

============ CSS for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

20 COMMENTS

  1. Here's what I've been trying. From the previous tutorial, I wanted to practice the concept. I came up with a test scenario. I want the background image to be a picture that spans the height and the width of the picture. I then wanted to add some text on top of it. So I tried a few scenarios, but none worked. I tried to have the wrapper have a background in the CSS portion of the wrapper. That didn't work. I tried it in the flex container. That only gave me a small sliver of the image. I tried commenting out the max width. And tried making the width and the height 100%. Didn't work. Below is the CSS code:

    *{
    font-family: verdana;
    margin: 0;
    }

    body{
    background: #eee;
    }

    .wrapper{

    width: 100%;

    max-width: 960px;
    margin: 0 auto;
    }

    .flex-container{
    display: flex;
    /* background: #fff;*/
    background-image: url("http://www.salifkeita.net/wp-content/uploads/2012/11/Actualites.jpg");

    }

    .box{
    height: 100px;
    min-width: 100px;
    }

    .one{
    background: red;
    }

    .two{
    background: blue;
    }

    .three{
    background: green;
    }

  2. I love your videos 🙂 Thank you.

    I think I might have figured out a way to understand the grow rate. I’m not 100% sure if this is correct:

    EXAMPLE ONE:

    You assign a grow rate to all of the flex items. You can assign whatever numbers you want.

    box1{ flex-grow: 2} box2{ flex-grow: 3} box3{ flex-grow: 4}

    You add all of these numbers up. This becomes the denominator of a fraction. Whatever space is available, you are dividing it into 9 equal pieces. (Because 2 + 3 + 4 = 9). Now, box1’s size takes up two of those nine pieces (2/9th of the space available); box2’s size is taking three of the nine pieces (3/9th of the space available); and box3’s size is taking four of the available pieces (4/9th of the space available);

    EXAMPLE TWO:

    Increase the flex-grow rate of box 3 and leave the other flex-grow rates the same:

    box1{ flex-grow: 2} box2{ flex-grow: 7} box3{ flex-grow: 4}

    now, the denominator is 13 (Because 2 +7+ 4 = 13 ). So, box1 is now 2/13th instead of 2/9th of the space available; box2 is 7/13th of the space available; and box3 is 4/13th of the space available.

  3. Hi! Great tutorials! I was wondering why my divs (one, two, three) spread out evenly of width instead of stacking left to right like it does to you? My code is exactly the same.

  4. I have a question.. Why. if my classes are named BOX ONE BOX TWO BOX THREE in css we only use .one .two .three and it works.. ?? thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here