flex-basis

The flex-basis property specifies the initial length of a flex item. When x-axis is the main axis, flex-basis defines width. When y-axis is the main axis, flex-basis defines height. The default value of this property is auto. If you don't specify this property, the width or height set for the flex item will be applied. The benefit of this property is that you can set the length of each flex item regardless of the main axis direction of the Flex Box.

When the horizontal axis is the main axis

The flex-basis property behaves like the width property in the illustration below. If both width and flex-basis values are set, the value of the flex-basis is prioritized.

HTML & CSS Introduction
Course Content