46

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?

1

2 Answers 2

44

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.
12
  • And what happens with 'flex-shrink'? What is the breakpoint for it to kick in?
    – ilyo
    May 9, 2014 at 16:55
  • 2
    flex-shrink works similarly to flex-grow: it dictates how much the element should shrink when the sum of initial/original widths on the same row exceeds the available space along the cross axis. Setting it to 0 prevents collapsing beyond their minimum widths (usually restricted by content in each element), while dimensionless integer values allows collapsing: 1 will enable collapsing, and n allows you to set ratios on how far each element collapses relative to 1.
    – Terry
    May 9, 2014 at 17:20
  • 1
    @Terry (In conventional sense) Main-axis = width, Cross-axis = vertical.
    – Vennsoh
    Oct 1, 2014 at 22:21
  • 1
    @Terry @Vennsoh what happens when an element has conflicting width and flex-basis values? Does one of them affect the other, or is one ignored? Which one?
    – tomekwi
    Jun 27, 2015 at 19:58
  • 4
    @tomekwi When you set conflicting width and flex-basis, flex-basis is used. Actually, the only time width is used is when flex-basis is set to auto, which is default. Set it to whatever and it will apply. Also notice that if min-width and max-width are respected, and the siblings on the same row account for it, but it sometimes might look like `flex-shrink|grow" do not apply correctly.
    – tao
    Mar 3, 2016 at 23:58
4

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.