For those who are unfamiliar with what Flexbox actually is, it's a smart layout mode in CSS that calculates and distributes space, which will solve a number of layout problems and hacks that we've wrestled with for years.

Flexbox basics

Change can be difficult, much like moving from table based layouts to floats, Flexbox can cause some major confusion at first.

The first basic concept is to understand Flexbox is a parent and child relationship, while only the parent technically needs display:flex for it to control the layout of its children, usually I'll put it on the child element to control its contents.

The second is how the shorthand works, if you've looked at Flexbox before you may have seen something like Flex:1 0 auto. This shorthand is broken down into three flexbox properties in this order: flex-grow, flex-shrink, and flex-basis.

Flex-basis and Flex-grow

Flex-basis determines how the other two properties behave, as its name suggests flex-basis is the basis on which the flexbox item knows how much it can grow or shrink to fill missing space. It's the initial size of each flex item, and can be restricted to be the only amount by specifying 0 on grow and shrink.