What exactly flex-basis property sets?

Question

Is there a difference between setting max-width or width to a flex item instead of the flex-basis?

Is it the "breaking point" for the flex-grow/shrink properties?

And when I set flex-wrap: wrap how does the browser decides at which point to move down item to new line? Is it according to their width or 'flex-basis'?

Example: http://jsfiddle.net/wP5UP/ The last two boxes have the same flex-basis: 200px, yet only one of them moves down when the window is between 300px and 400px. Why?

Answer 1

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.

It is, however, not the breaking point for flex-grow/shrink properties. The browser determines when to wrap the element on the basis of if the initial sizes of elements exceed the width of the cross-axis (in conventional sense, that is the width).

Based on your fiddle, the reason why the last one moves down the window is because the width of the parent has been fully occupied by the previous siblings — and when you allow content to wrap, the elements that fail to fit in the first row gets pushed to the subsequent row. Since flex-grow is a non-zero value, it will simply stretch to fill all spaces left in the second row.

See demo fiddle (modified from yours).

If you look at the fiddle, I have modified for the last item to have a new size declaration:

.size3 {
  flex: 0 1 300px;
}

You will realize that the element measures 300px across as intended. However, when you tweak the flex-grow property such that its value exceeds 0 (see example), it will stretch to fill the row, which is the expected behavior. Since in its new row context it has no siblings to compare to, an integer between 1 to infinity will not influence it's size.

Therefore, flex-grow can be seen as this:

• 0: (Default value) Do not stretch. Either size to element's content width, or obey flex-basis.
• 1: Stretch.
• ≥2 (integer n): Stretch. Will be n times the size of other elements with flex-grow: 1 on the same row, for example.

Answer 2

Good article https://gedd.ski/post/the-difference-between-width-and-flex-basis/

flex-basis is: the size of flex items before they are placed into a flex container. It's the ideal or hypothetical size of the items. But flex-basis is not a guaranteed size! As soon as the browser places the items into their flex container, things change. Often times the flex container won't have enough space, or will have extra space, after all its items' flex-basis values are added up.