Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Combining the flexbox sizing properties using the flex shorthand

    Garth BraithwaiteGarth Braithwaite

    The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    There is also a shorthand for these three values. I can use the flex property that lets me pass three values, flex-grow, flex-shrink, and flex-basis, all space delimited. There are multiple configurations of these things. The defaults are different in this configuration just to mess things up. Let me show you a couple of examples.

    In this example, flex is set to one, which it doesn't have a unit so it gets passed through to the flex-grow property. Flex-shrink is also set to one because that's what the default is. Flex-basis is set to zero, which is unusual because flex-basis usually defaults to auto. But in this syntax, if flex-basis is not defined, it defaults to zero.

    In this next example, flex is set to 20 pixels. Because it has a unit of measurement, the only value that could be is flex-basis. Flex-grow defaults to one, which is weird because usually it defaults to zero. Flex-shrink still defaults to one here. Flex-basis gets that 20-pixel value.

    Here, in this example, I'm defining a unitless measurement first, and then I'm defining a measurement with pixels on it. Flex-grow gets the first measurement, which is zero. Flex-shrink gets one, still default. Flex-basis gets that 80 pixels.

    What's important to notice here is that the flex-grow and the flex-basis defaults are different when you use the flex shorthand notation than when you use the flex-grow and flex-basis notation.

    What's nice about this shorthand is if I set all the flex properties to one, which means a flex-grow of one, and a flex-shrink of one, and a flex-basis of zero, it makes all the children the same size and all grow to use all the space, which is something you'll find you'll often want to do with flexbox.