The initial main size of flex item, flex-basis

You can see from the example of the margins that the “old” properties inside the flex container behave rather stupidly. The width and height properties are also unable to react to the rotation of the main axis. Therefore, the concepts of the main size and cross size have been introduced.

If the main axis flows horizontally, then the main size is the width property, and the cross size is the height property. If the main axis flows vertically, then the opposite is true.

It would be nice to have a “smart” property that could be used to assign the size of flex elements that knows about the flow direction of the main axis and “rotates” with it.

Indeed, we already have such a property: flex-basis. It sets the basic size of the flex item or size along the main axis.

If the flex-basis is not set, or its value is auto, then the basic size is taken from width or height.

The flex-basis property accepts the same values as width/height:

flex-basis: 100px; /* basic size of 100 pixels */
flex-basis: 50%;   /* basic size of 50% of the container */

The flex-basis takes precedence over the width and height properties, and if all three properties are assigned for the flex item, then flex-basis will override the width or height properties depending on the flow direction of the main axis.