What exactly flex-basis property sets?

by

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.

More Related Contents:

  1. Make a div span two rows in a grid
  2. Bootstrap align navbar items to the right
  3. Aligning grid items across the entire row/column (like flex items can)
  4. What’s the difference between align-content and align-items?
  5. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  6. How can I make Flexbox children 100% height of their parent?
  7. Bootstrap 4 navbar with 2 rows
  8. What’s the difference between display:inline-flex and display:flex?
  9. What does flex: 1 mean?
  10. Scrolling a flexbox with overflowing content
  11. A grid layout with responsive squares
  12. Bootstrap 4 masonry layout utilizing flexbox grid
  13. How to change flexbox wrap?
  14. Create a Masonry grid with flexbox (or other CSS)
  15. css grid of squares with flexbox
  16. CSS flexbox not working in IE10
  17. Set flexbox children to have different heights to use up available space
  18. Height 100% on flexbox column child [duplicate]
  19. text-overflow ellipsis on flex child not working [duplicate]
  20. React native text going off my screen, refusing to wrap. What to do?
  21. How can I change the order of Bootstrap columns?
  22. How to use safe center with flexbox?
  23. How do I set distance between flexbox items?
  24. Why isn’t my justify-content property working?
  25. Difference between flex-end and end? [duplicate]
  26. How to exclude the first item in a flexbox wrap?
  27. Row Wrap in flex-box not wrapping in Safari
  28. ml-auto is not pushing navbar links to the right
  29. CSS Flexbox: difference between align-items and align-content [duplicate]
  30. First-child full-width in Flexbox

Leave a Comment