CSS-Tricks, as the name states, does not use tricks, rather well-thought out code shortcuts to make life easier on the coder. The flex-basis property is a sub-property of the Flexible Box model that establishes the starting size values of the flex items, before any leftover space is changed due to flex factors. The flex property has three values represented in its declaration. The flex-grow and flex-shrink precede the flex-basis value, respectively. With these three values, flex items may be placed in various arrays. An example of a declaration using flex for styling is "flex: 1 1 auto". The ability to combine properties in one declaration, saves the user valuable time when coding.
The flex-basis property defines the size of its 'flex-items' along the main axis of the flex-container. The flex-basis property has values as well. The content value resolves the size based on the element's content, UNLESS width or height is set through normal box-sizing. The auto looks up the main size of the element and defines the size. On a horizontal flex container, the auto value will look for width and height if the container axis is vertical.
The flex-basis property sets the size of the content box unless the box-sizing: property is set. This property has two values, 'border-box' and 'content-box'. Content-box is the default and does not account for the padding and margin of each flex-item, therefore, increasing the dimentions of the items used inside the container. Border-box accounts for the padding and margins and sizes the item to include them in the items dimensions, helping coders for the layout of the page.
The flex-box model is a versatile tool to use for the intended layout of a web page. This model uses calculations to adjust proportionally flex-items placed in the layout that would otherwise take precious time and countless calculations to achieve the display that the developer desires. QED