But since they all shrink by the same amount, they all end up with the same width. Now, instead of using the width property here, we can specify the same using another property, flex-basis. What's the difference? Actually not much, but the browser looks for this property flex-basis first and sets the initial item size to this value. If this property is not found, then it looks for width in case of row direction or height in case of column direction. So with flex-basis, we can set the initial width of an item. In case flex-direction is column,

When we want all equal sized items, we can set the initial width to 0, that is flex-basis to 0% and then set flex-grow for each of the items to 1. flex-grow 1, flex-basis 0% and flex-grow 1. Let's check if we have the same output. Yes, we do. Now, why is this better? Because now we can add another item, say copy this and paste it, and still all four blocks take up the same space. If flex-basis was 33.33%, we have to change it to 25% and when we remove a block, let's say,