If no flex-basis is specified, flexbox uses the element width:

width: 80%
width: 20%

If flex-basis is specified, it overrides the element width:

width: 80%; flex-basis: 20%;
width: 20%; flex-basis: 80%;

(I can't think of any reason you'd ever do this in real life, but if you do, this is what happens!)

flex-basis can be in relative or absolute units, and if the total size of the elements is smaller than the flex container, it has the same effect as specifying width or height:

flex-basis: 30%
10vw
5rem
100px

The effect of flex-basis is easiest to see when the elements add up to more than 100% of the container size:

10%
30%
50%
70%
200px
400px
600px
800px
200%
200px
10px
20rem