What do the "0 0" in "flex: 0 0 33%" stand for?

Question

I'm currently learning about flex and saw this line in Bootstrap 4's column classes:

.col-md-4 {
    flex: 0 0 33.3333%;
}

What are the corresponding properties for the two 0 0?

Answer 1

From MDN:

flex

This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis.

It's useful to think of them as proportional arguments about how much the element should grow or shrink. 0 0 33% basically just means "take up a third", and don't "grow" or "shrink" any more, proportional to the other elements.

In more detail:

flex-grow

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.

flex-shrink

The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.

flex-basis

The flex-basis CSS property specifies the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.