W3C home > Mailing lists > Public > www-style@w3.org > October 2012

Re: [css3-flexbox] Bad result in flex algorithm when combining stretch, and elements with an aspect ratio

From: Kang-Hao (Kenny) Lu <kanghaol@oupeng.com>
Date: Mon, 29 Oct 2012 15:30:31 +0800
Message-ID: <508E3097.6080601@oupeng.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
(12/10/29 15:02), Tab Atkins Jr. wrote:
> On Mon, Oct 29, 2012 at 7:53 AM, Kang-Hao (Kenny) Lu
> <kanghaol@oupeng.com> wrote:
>> (12/10/28 23:51), Tab Atkins Jr. wrote:
>>> Any objections?  Otherwise, I'll edit the flexbox layout algorithm
>>> with the following two changes:
>>>
>>> 1. Add a bullet point to step 3 (hypothetical main size determination)
>>> to handle aspect-ratio items with "stretch" alignment (so they get the
>>> correct hypothetical main size).
>>
>> I am not getting this part. Are you saying that the *correct*
>> hypothetical main size of <image> in the above example is 50px? Why?
>> That doesn't feel right to me....
> 
> Well, either you honor "stretch" and preserve the aspect ratio (making
> it 50x100), honor "stretch" and don't preserve the aspect ratio
> (making it 100x100), or don't honor stretch at all (making it
> 100x200).
> 
> Of all of these, it seems that the first is the best option.  We
> should always honor the aspect ratio if possible, and we should always
> honor stretch if possible.  As long as nothing is happening in the
> main axis, we can always honor both.

I think you just need to come up an with an algorithm that avoids
circular dependency in a case like, say:

<flexbox direction=row flex-wrap=wrap width=500px>
  <image intrinsic-width=100px intrinsic-height=200px align-self=stretch />
  <div width=400px height=400px flex=1 />
</flexbox>

Is it:

== Result 1 ==
Line 1 (height: 400px): 100px x 400px, 400px x 400px

or

== Result 2 ==
Line 1 (height: 400px): 200px x 400px
Line 2 (height: 400px): 400px x 400px

or

== Result 3 ==
Line 1 (height: 200px): 100px x 200px
Line 2 (height: 400px): 400px x 400px

?

Or does your change only apply to single line flex containers?


Cheers,
Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/
Received on Monday, 29 October 2012 07:39:13 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT