There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is
flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.
…which in itself doesn’t say much about the behavior of elements with flex-basis set. With my current knowledge of flexbox I don’t see why that couldn’t describe width also.
I’d like to know how exactly flex-basis is different from width in practice:
- If I replace width with flex-basis(and vice versa), what will change visually?
- What happens if I set both to a different value? What happens if they have the same value?
- Are there some special cases where using either width or flex-basis would have a significant difference to using the other?
- How do width and flex-basis differ when used in conjunction with other flexbox styles, such as flex-wrap, flex-grow and flex-shrink?
- Any other significant differences?
Edit/clarification: This question has been asked in a different format in What exactly flex-basis property sets? but I felt a more direct comparison or summary of the differences of flex-basis and width (or height) would be nice.