[css3-flexbox] negative flexibility

A "division" formula that I proposed for negative flexibility earlier [1] was incorrect, it would not get a continuous scaling. 

Correct formula for the desired result:

	space-shortage = sum(flex-basis) - available-space
	shrink-factor = space-shortage / sum(flex-basis * negative-flex))
	main-size = flex-basis * (1 - shrink-factor * negative-flex))

With this, bigger items shrink faster and items of same flex keep same relative size when shrinking.

Example 1:

<div id="Flexbox" style="display:flex">
	<div id="A" style="flex:1 1 100px"></div>    
	<div id="B" style="flex:1 1 500px"></div>
</div>

Linear shrinking:

    Flexbox     A       B
    600         100     500
    500         50      450
    400         0       400
    300         0       300
    200         0       200
    100         0       100

Proportional shrinking:

    Flexbox     A       B
    600         100     500
    500         83      417
    400         67      333
    300         50      250
    200         33      167
    100         17      83

I think "proportional" is a much better behavior.

Note that the most useful behavior is when 'flex-shrink' is same on all flexible items. Considering that 'flex-grow' is rarely anything other than 0 or 1 and that with this formula equal flexibility works well for shrinking,

	* "flex:auto" should be same as "flex:1 1 auto" (instead of "1 0 auto")
	* "flex:N" should be same as "flex:N N 0px" (instead of "N 0 0px")

[1] http://lists.w3.org/Archives/Public/www-style/2012Apr/0692.html 

Alex

Received on Tuesday, 8 May 2012 02:37:26 UTC