DEV Community

Cover image for Flex-grow, Flex-shrink, Flex-basis - Day 4 Coding Challenge - Seb Codes the Web
Sebastian
Sebastian

Posted on

Flex-grow, Flex-shrink, Flex-basis - Day 4 Coding Challenge - Seb Codes the Web

Flex-grow, Flex-shrink, Flex-basis - Day 4 Coding Challenge

I finished module 7 yesterday from the frontend-developer path on Scrimba.com. And started module 8, which was about Flexbox, and using flexbox with fetch(some weird combination I guess)

I already felt like I knew how to use flexbox, but there are some new interesting things I discovered.

The most interesting things to me were flex-basis, flex-grow, and flex-shrink, which could all be defined in the shorthand of flex. These properties basically control the sizing of the flexbox items. Flex-grow controlling excessive space, flex-shrink controlling a lack of space, and flex-basis setting the border when it turns over from flex-shrink to flex-grow.

Flex-grow controls how fast the item grows as the viewport gets larger, for example:

.flex-item-1 {
    flex-grow: 1;
}

.flex-item-2 {
    flex-grow: 2;
}
Enter fullscreen mode Exit fullscreen mode

Then that would mean that as the viewport gets larger, flex-item-2 would get twice as much of the new space, and therefore "grow". Flexbox shrink works in the same fashion, where it instead shrinks in different paces.

Flex-basis is an interesting one, because it sets the default value before the flex-items start to grow or shrink. It's kind of like setting an ideal size, following the main axis of the flex-container. It's sets the basepoint for were the flex-item is going to start to grow and shrink.

What do I mean with this? Well, trying to put it simply, flex-basis sets the width of an item, but if the flex-direction was column, then it would set the height instead.

Together all this properties could be summed up in one shorthand, flex. It could look like this:

.flex-item {
    flex: 0 1 100px;
}
Enter fullscreen mode Exit fullscreen mode

This code sets flex-grow to 1, flex-shrink to 0 and flex-basis to 100px. Note that the default for flex-grow is 0, meaning that the item reaches a certain size and then stops growing. However, when you use the shorthand, it changes the default for flex-grow to 1, if you don't define it.

Thus is the basics of flex-grow, flex-shrink and flex-basis. They really help in creating fully responsive websites!

Funny Gif

I will be further documenting my progress for the coming days, and filming myself on my Youtube-channel, it would really make my day if you subscribed to my youtube channel or followed my blog, so you can come along my journey and learn with me!

Peace.

Latest comments (0)