RE: FW: [css3-flexbox] flex distribution

> From: a.fedoniouk@gmail.com [mailto:a.fedoniouk@gmail.com] On Behalf Of
> Andrew Fedoniouk
> Sent: Wednesday, February 01, 2012 4:49 AM
> 
> Indeed, your algorithm in the way it is explained tends to oscillate I think (didn't
> do excessive analysis though).

I think I found a case when it would oscillate, but probably not in the sense you have in mind. On different steps, size of one item may be sometimes bigger than preferred and sometimes smaller than preferred, and if flexibility in one direction is zero the item may be frozen too soon. That would be very bad.

My proposed way to avoid that is to predict in advance if items will have to grow or will have to shrink. It should be doable in one step: if total of min/max adjusted preferred sizes is smaller than available space, items will grow, they will shrink otherwise.

> 
> It should look like this:
> 
> 0.      Let TOTAL_FLEXES be a sum of all flexes. Let TOTAL_SPACE be an
> available space.
>          Let SET be a list of flexible items.
> 
> 1.      From all flexible items in the SET reset sizes to their preferred value.
> 
> 2.      If either
>             a.  TOTAL_SPACE is zero or
>             b.  TOTAL_FLEXES is zero or
>             c.  SET is empty.
>             we are done - exit.
> 
> 3.      Find free space by subtracting sum of item sizes from available space.
> 
> 4.      Distribute free space proportional to flex.
> 
> 5.      Fix min/max violations:
>      a.      If size of flex item is less than min value set the size
> to that min value and
>               exclude (subtract) flex value of the item from TOTAL_FLEXES and the size
> from
>               TOTAL_SPACE. Exclude the item from the SET. Go to step 1.
>      b.      If size of flex item is greater than max value set the
> size to that max value and
>               exclude (subtract) flex value of the item from TOTAL_FLEXES and the size
> from
>               TOTAL_SPACE. Exclude the item from the SET. Go to step 1.
> 
> By its nature this algorithm will do max of sizeof(SET) iterations so is stable.

Your algorithm is guaranteed to finish, but it is will miss some solutions:
	#flexbox { width:200px; }
	#item1	{ flex(1); min-width:150px; }
	#item 	{ flex(1); max-width:90px; }
and
	#flexbox { width:200px; }
	#item1	{ flex(1); min-width:120px; }
	#item 	{ flex(1); max-width:50px; }
Will get incorrect results

Alex

Received on Sunday, 5 February 2012 22:16:15 UTC