In the interest of learning Flexbox during bootcamp, I tried my hand at the brilliant Flexbox Froggy challenge. I completed all 24 levels, but in a pattern-matching, brute-force kinda way. By the end, I felt like I had learned nothing.
Months later, I decided to try my hand again at Flexbox Froggy. There's a lot that I learned about container properties and item properties, but I found there's a few commands that aren't included in Flexbox Froggy, and I'm gonna go over them in this post!
flex-grow
Imagine that you have three children you're driving to the park. Two are babies, and one is a toddler. Since the toddler is twice as big as the babies, he'll need a car seat that is twice as big, too. If each baby gets a space, the toddler will need a space that's twice as big. flex-grow allows you to designate a multiple of space for any element that you want. In this example, it would work like this:
.baby {
flex-grow: 1;
}
.toddler {
flex-grow: 2;
}
flex-shrink
flex-shrink is like the inverse of flex-grow. The example above, where I need right-sized car seats for two babies and a toddler. Instead of giving each baby a space set to 1 and the toddler gets a space set to 2, I can give the toddler a space set to 1 and the babies get a space set to 0.5, like this:
.toddler {
flex-grow: 1;
}
.baby {
flex-grow: 0.5;
}
flex-basis
flex-basis is a little tricky to explain without an example, so here's an example (based on this good article from [mastery.games]9https://mastery.games/post/the-difference-between-width-and-flex-basis/)): Imagine you have an 1000px wide container and you have four 200px items you want to put inside the container. 1000px minus (4 * 200px) = 800px, so there will be an extra 200px of empty space. If you want those four items to stretch to fit nicely into that 1000px container, you can dictate the basis of the item to 250px (because you know 1000px ÷ 4 = 250px).
.container {
display: flex;
width: 1000px;
}
.item {
flex-basis: 250px;
}
Top comments (0)