That reminds me again that flexbox is so needlessly complex that you need quite ...

cztomsik · on Nov 23, 2022

core algo is simple, the complexity goes from everything else, which still needs to work with flexbox (min/max, relative/absolute/fixed, relative units everywhere, calcs, and the concept of min-content or whatever that is, for which you need to recursively call algos down even when in theory the size should be known already - text-specific)

the only stupid thing is the "loop until there is no deviation", but I think it's not mandatory for most of the real-world layouts and one pass is enough.

the naming of those alignments is hard to remember, but that's it, it's not complex, it's just very unfortunate.

jacobp100 · on Nov 23, 2022

I think in almost every real world scenario, the loop only runs once. I don't think it adds a huge amount of complexity to the layout algo - you still need to code in the loop body, even if you don't actually loop. That said - React Native only does two passes, and nobody seems to have noticed/complained.

You can do some neat things with the looping behaviour - like have a toolbar with some icons on the left and the right hand sides and a title centred in the toolbar - but then have the title move off centre as soon as the icons from either side touch it.

c-smile · on Nov 23, 2022

"core algo is simple"

It is not that simple. In common case that's an LP task. It can be reduced to O(N) in some cases but in worst case it has polynomial time-complexity.

jacobp100 · on Nov 23, 2022

What's your take on grid? I still can't quite grok the algorithm - but from your article, your proposal seems really similar to what's available with grid.

Grid does suffer from not being able to set min/max track sizes - like have a sidebar be say 20% of the width, but clamped between 200px and 300px

c-smile · on Nov 24, 2022

   sidebar {
     width:0.2*; //20% of the width
     min-width: 200px;
     max-width: 300px;
   }