Skip to content

Commit 28ce1b2

Browse files
committed
[css3-flexbox] Try to fix the flex algo with aspect-ratio items, so you don't unnecessarily screw up the aspect ratio.
1 parent 55f5e75 commit 28ce1b2

2 files changed

Lines changed: 28 additions & 0 deletions

File tree

css3-flexbox/Overview.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3123,6 +3123,17 @@ <h3 id=line-sizing><span class=secno>9.2. </span> Line Length Determination</h3>
31233123
constraint. The <a href="#flex-base-size"><i>flex base size</i></a> is
31243124
the item's resulting main size.
31253125

3126+
<li> If the flex basis and cross size are both ‘<code
3127+
class=css>auto</code>’ , the flex container is single-line and has a
3128+
<a href="#definite-size"><i>definite</i></a> cross size, the flex item
3129+
has an intrinsic aspect ratio, and the flex item has ‘<code
3130+
class=css>align-self: stretch</code>’, the <a
3131+
href="#flex-base-size"><i>flex base size</i></a> is computed from the
3132+
flex container's inner cross size and the flex item's intrinsic aspect
3133+
ratio.
3134+
<p class=issue> This substep needs review, see thread at <a
3135+
href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html">http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html</a>.
3136+
31263137
<li> Otherwise, if the flex basis is ‘<code class=css>auto</code>
31273138
or depends on its available size, the available main size is infinite,
31283139
and the flex item's inline axis is parallel to the main axis, lay the
@@ -3237,6 +3248,8 @@ <h3 id=cross-sizing><span class=secno>9.4. </span> Cross size determination</h3>
32373248
sizes is less than the flex container's inner cross size, increase the
32383249
cross size of each flex line by equal amounts such that the sum of their
32393250
cross sizes exactly equals the flex container's inner cross size.
3251+
<p class=note> Note that this step does not affect the main size of the
3252+
flex item, even if it has an intrinsic aspect ratio.
32403253

32413254
<li id=algo-visibility> <strong>Collapse ‘<code
32423255
class=css>visibility:collapse</code>’ items.</strong> If any flex items

css3-flexbox/Overview.src.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2394,6 +2394,17 @@ <h3 id='line-sizing'>
23942394
size the item under that constraint.
23952395
The <i>flex base size</i> is the item's resulting main size.
23962396

2397+
<li>
2398+
If the flex basis and cross size are both ''auto'' ,
2399+
the flex container is single-line and has a <i>definite</i> cross size,
2400+
the flex item has an intrinsic aspect ratio,
2401+
and the flex item has ''align-self: stretch'',
2402+
the <i>flex base size</i> is computed from the flex container's inner cross size
2403+
and the flex item's intrinsic aspect ratio.
2404+
2405+
<p class='issue'>
2406+
This substep needs review, see thread at <a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html">http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html</a>.
2407+
23972408
<li>
23982409
Otherwise,
23992410
if the flex basis is ''auto'' or depends on its available size,
@@ -2520,6 +2531,10 @@ <h3 id='cross-sizing'>
25202531
increase the cross size of each flex line by equal amounts
25212532
such that the sum of their cross sizes exactly equals the flex container's inner cross size.
25222533

2534+
<p class='note'>
2535+
Note that this step does not affect the main size of the flex item,
2536+
even if it has an intrinsic aspect ratio.
2537+
25232538
<li id='algo-visibility'>
25242539
<strong>Collapse ''visibility:collapse'' items.</strong>
25252540
If any flex items have ''visibility: collapse'',

0 commit comments

Comments
 (0)