Understanding flex-grow, flex-shrink, and flex-basis
When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:
<div class="parent">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
And then we write some CSS…
.parent {
display: flex;
}
These are technically not the only styles we’re applying when we write that one line of CSS above. In fact, a whole bunch of properties will be applied to the .child elements here, as if we wrote these styles ourselves:
.child {
flex: 0 1 auto; /* Default flex value */
}
That’s weird! Why do these elements have these extra styles applied to them even though we didn’t write that code? Well, that’s because some properti...
