flex-basis vs width

Flex basis The flex-basis property specifies the initial size of an object before the remaining space is distributed. The length can be in percentages or pixels. If set to 'auto', the extra space is distributed based on the flex-grow value.

flex-basis vs widths

Here you can see very clearly that when an item has a flex-basis and a width. The browser will always use the value set with flex-basis . Again, another reason to use the proper flex way 😉

But watch out, if you also set a min-width and max-width. In those cases, flex-basis will lose and will not be used as the width.