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;
}

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;
}

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!

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.