4 ms·

Flexbox works kinda like this as far as i know: Your items get distributed along the main axis, using their flex-basis. When all elements are layed out, flexb

Flexbox works kinda like this as far as i know: Your items get distributed along the main axis, using their flex-basis. When all elements are layed out, flexbox will evaluate how much space is left, or how much overlap there is. This total remaining space will be distributed among all flex items proportionally to their flex-grow value. A flex-grow value of 2 means "grow twice as much as your siblings if there's spare room" (0 will prevent an element from growing at all, even if there is space left). So if 3 elements with flex-grow 1--1--2 and 100px basis each where to fill a 400px box, the remaining 100px would be distributed 25--25--50. Flex-shrink works the other way round. The same 400px-box example with flex-basis 200px and shrink 1--1--2 would result in 150--150--100px wide elements.

c-smile 9y ago
"Flexbox works kinda like this as far as i know:" That's the thing - nobody knows exactly how it works. Except few developers who actually tried to implement the spec. Nobody knows why do we need separate flex-shrink and flex-grow. Nobody knows why these are properties and not units so they can be used not just for width/height but for padding, margin, border-width, top/left/bottom/right, size, etc. Nobody knows why 'flex' is a value of 'display' property and not of some other property orthogonal to display like 'flow' or 'layout'. So we can write something like this: td.some { display:table-cell; flow: horizontal; // a.k.a. flex/row } At the moment there is no way to define flexible content flow inside table-cell's and list-item's as display:flex is mutually exclusive with display:table-cell. Really, flexbox is the worst CSS module ever published and accepted by W3C.
- Doxin 9y ago
  > nobody knows exactly how it works. That's either plain nonsense or trivially true of all css, depending on your definitions. Flexbox really isn't all that confusing or hard, and it does more than table layouts ever did. Separate flex-grow and flex-shrink are needed for the same reason there's a min-width and a max-width property. flex-shrink defines if the element is allowed to shrink, and how much it does when needed. flex-grow defines if the element is allowed to grow, and how much when needed. The reason they are unitless values is because they are used to calculate ratios. I agree that there have been some dubious design decisions, but if you really need to do a table cell with a flex-flowing content you can always stick a wrapper div in the cell.
  - c-smile 9y ago
    "flex-shrink defines if the element is allowed to shrink" Rhetorical question: Shrink from what? From defined flex-base or from defined width? What is the behavior when they are different? "you can always stick a wrapper div in the cell" Nice, tag soup forever.
- kowdermeister 9y ago
  Just take your time learning it, it's not that hard. If bootcampers can learn it in a few days, I'm sure you can do it too.
- krsdcbl 9y ago
  Sorry I didnt mean to create the impression that i am guessing here. This _is_ how it works, i just didnt have the source at hand and wanted to just exolain the broad mechanism

c-smile 9y ago

"Flexbox works kinda like this as far as i know:" That's the thing - nobody knows exactly how it works. Except few developers who actually tried to implement the spec. Nobody knows why do we need separate flex-shrink and flex-grow. Nobody knows why these are properties and not units so they can be used not just for width/height but for padding, margin, border-width, top/left/bottom/right, size, etc. Nobody knows why 'flex' is a value of 'display' property and not of some other property orthogonal to display like 'flow' or 'layout'. So we can write something like this: td.some { display:table-cell; flow: horizontal; // a.k.a. flex/row } At the moment there is no way to define flexible content flow inside table-cell's and list-item's as display:flex is mutually exclusive with display:table-cell. Really, flexbox is the worst CSS module ever published and accepted by W3C.

Doxin 9y ago
> nobody knows exactly how it works. That's either plain nonsense or trivially true of all css, depending on your definitions. Flexbox really isn't all that confusing or hard, and it does more than table layouts ever did. Separate flex-grow and flex-shrink are needed for the same reason there's a min-width and a max-width property. flex-shrink defines if the element is allowed to shrink, and how much it does when needed. flex-grow defines if the element is allowed to grow, and how much when needed. The reason they are unitless values is because they are used to calculate ratios. I agree that there have been some dubious design decisions, but if you really need to do a table cell with a flex-flowing content you can always stick a wrapper div in the cell.
- c-smile 9y ago
  "flex-shrink defines if the element is allowed to shrink" Rhetorical question: Shrink from what? From defined flex-base or from defined width? What is the behavior when they are different? "you can always stick a wrapper div in the cell" Nice, tag soup forever.
kowdermeister 9y ago
Just take your time learning it, it's not that hard. If bootcampers can learn it in a few days, I'm sure you can do it too.
krsdcbl 9y ago
Sorry I didnt mean to create the impression that i am guessing here. This _is_ how it works, i just didnt have the source at hand and wanted to just exolain the broad mechanism