What is the difference between flex-basis and width?

Question

css

Actually, a question in a subject, I illustrate an example.



Both options work, what's the difference?

Answer 1

Flex-basis sets the initial size of the element relative to the main axis of the flex container. Depending on the direction of the axis, it can be similar to both width and height. Rather, even min-width and min-height. An element will not be smaller than flex-basis, but it can be larger, depending on the size of the container, window ...
Flex-basis gives much more opportunities for beautifully adapting the layout to mobile resolutions, for example, when the container stops being a row and becomes a column, or vice versa.
PS As I was rightly corrected below, flex-basis behaves differently than min-width/height in the case when it does not fit into the container, it does not "climb out".