Skip to content

Commit ad0a068

Browse files
fantasaifantasai
committed
[css-flexbox] Update Changes section.
1 parent cdeccd7 commit ad0a068

1 file changed

Lines changed: 247 additions & 21 deletions

File tree

‎css-flexbox/Overview.bs‎

Lines changed: 247 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3314,6 +3314,7 @@ Appendix A: Axis Mappings</h2>
33143314
<p>Thanks for feedback and contributions to
33153315

33163316
Erik Anderson,
3317+
Christian Biesinger,
33173318
Tony Chang,
33183319
Phil Cupp,
33193320
Arron Eicholz,
@@ -3369,12 +3370,61 @@ Substantive Changes and Bugfixes</h4>
33693370
since that was a hacky way of solving an intrinsic size problem,
33703371
and isn't needed (and gives bad results)
33713372
given a correct implementation of [[#intrinsic-sizes]].
3372-
<li id="change-2015-intrinsic-sizing">
3373-
Correct instrinsic sizing rules to handle inflexible items.
3374-
<li id="change-2015-a11y-tools">
3375-
Add explicit conformance criteria on authoring tools
3376-
to keep presentation and DOM order in sync
3377-
unless author explicitly indicates a desire to make them out-of-sync.
3373+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-13">Issue 13</a>)
3374+
<blockquote>
3375+
<p>When omitted from the 'flex' shorthand, its specified value is ''0<del>%</del>''.
3376+
</blockquote>
3377+
<blockquote>
3378+
<dl>
3379+
<dt>''flex: &lt;positive-number>''
3380+
<dd>
3381+
Equivalent to ''flex: &lt;positive-number> 1 0<del>%</del>''.
3382+
</dl>
3383+
</blockquote>
3384+
<li id="change-2015-anonymous-fixup">
3385+
Changed <a href="#flex-item">flex item determination</a> to operate on each element directly,
3386+
and not on its anonymous wrapper box, if any.
3387+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-6">Issue 6</a>)
3388+
<blockquote>
3389+
<ul>
3390+
<li><del>'float' and 'clear' have no effect on a <a>flex item</a>,</del>
3391+
<ins>'float' and 'clear' do not create floating or clearance of <a>flex item</a>,</ins>
3392+
and do not take it out-of-flow.
3393+
<del>However, the 'float' property can still affect box generation
3394+
by influencing the 'display' property's computed value.</del>
3395+
</ul>
3396+
</blockquote>
3397+
<blockquote>
3398+
<del>
3399+
<p>Some values of 'display' trigger the creation of anonymous boxes around the original box.
3400+
It's the outermost box&mdash;the direct child of the <a>flex container</a> box&mdash;that
3401+
becomes a <a>flex item</a>.
3402+
For example, given two contiguous child elements with ''display: table-cell'',
3403+
the <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">anonymous table wrapper box generated around them</a> [[!CSS21]]
3404+
becomes the <a>flex item</a>.</p>
3405+
<p>In the case of flex items with ''display: table'',
3406+
the table wrapper box becomes the <a>flex item</a>,
3407+
and the 'order' and 'align-self' properties apply to it.
3408+
The contents of any caption boxes contribute to the calculation of
3409+
the table wrapper box's min-content and max-content sizes.
3410+
However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows:
3411+
the <a>flex item</a>’s final size is calculated
3412+
by performing layout as if the distance between
3413+
the table wrapper box's edges and the table box's content edges
3414+
were all part of the table box's border+padding area,
3415+
and the table box were the <a>flex item</a>.</p>
3416+
</del>
3417+
<ins>
3418+
<p class="note">
3419+
Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.
3420+
If such a box is a <a>flex item</a>,
3421+
it is blockified first,
3422+
and so anonymous box creation will not happen.
3423+
For example, two contiguous <a>flex items</a> with ''display: table-cell''
3424+
will become two separate ''display: block'' <a>flex items</a>,
3425+
instead of being wrapped into a single anonymous table.</p>
3426+
</ins>
3427+
</blockquote>
33783428
<li id="change-2015-min-auto-intrinsic-percentages">
33793429
Defined that any size adjustment imposed by a box’s ''min-height/min-width: auto''
33803430
is consulted when percentage-sizing any of its contents.
@@ -3392,11 +3442,187 @@ Substantive Changes and Bugfixes</h4>
33923442
(like the ''min-content'', ''max-content'', and ''fit-content'' values defined in [[CSS3-SIZING]])
33933443
does not prevent the resolution of percentage sizes within the item.</ins>
33943444
</blockquote>
3395-
</ul>
3445+
<li id="change-2015-intrinsic-items">
3446+
Correct instrinsic sizing rules to handle inflexible items.
3447+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-1">Issue 1</a>)
3448+
<blockquote>
3449+
<p>The main-size <a lt="min-content contribution">min-content</a>/<a>max-content contribution</a> of a <a>flex item</a>
3450+
is its outer <del><a>hypothetical main size</a>
3451+
when sized under a <a lt="min-content constraint">min-content</a>/<a>max-content constraint</a> (respectively)</del>
3452+
<ins>The <strong>main-size <a lt="min-content contribution">min-content</a>/<a>max-content contribution</a> of a <a>flex item</a></strong>
3453+
is its <em>outer</em> <a lt="min-content size">min-content</a>/<a>max-content size</a>,
3454+
clamped by its <a>flex base size</a> as a maximum (if it is not growable)
3455+
and/or as a minimum (if it is not shrinkable),
3456+
and then further clamped by its <a lt="min main size property">min</a>/<a>max main size properties</a></ins>.</p>
3457+
</ins>
3458+
</blockquote>
3459+
<li id="change-2015-intrinsic-main-container">
3460+
Correct errors in <a>flex container</a> main-axis intrinsic sizing.
3461+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-1">Issue 1</a>)
3462+
<blockquote>
3463+
<p>The <a>max-content main size</a> of a <a>flex container</a>
3464+
is the smallest size the <a>flex container</a> can take
3465+
while maintaining the <a>max-content contributions</a> of its <a>flex items</a>:</p>
3466+
<ol>
3467+
<li>
3468+
For each <a>flex item</a>,
3469+
subtract its <ins>outer</ins> <a>flex base size</a> from its <a>max-content contribution</a> size<del>,
3470+
then divide by its <a>flex grow factor</a>, floored at 1,
3471+
or by its <a>scaled flex shrink factor</a> (if the result was negative,
3472+
flooring the <a>flex shrink factor</a> at 1 if necessary)</del>.
3473+
<ins>If that result is not zero, divide it by (if the result was positive) its <a>flex grow factor</a> floored at 1,
3474+
or (if the result was negative) by its <a>scaled flex shrink factor</a>, having floored the <a>flex shrink factor</a> at 1.</ins>
3475+
This is the item's <var>max-content flex fraction</var>.
3476+
</ol>
3477+
</blockquote>
3478+
<li id="change-2015-intrinsic-cross-container">
3479+
Correct errors in <a>flex container</a> cross-axis intrinsic sizing,
3480+
and specify commonly-implemented min-content sizing heuristic for multi-line column flex containers.
3481+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-12">Issue 12</a>)
3482+
<blockquote>
3483+
<del>
3484+
<p>The <a>min-content cross size</a> and <a>max-content cross size</a> of a flex container
3485+
are the <a>cross size</a> of the flex container
3486+
after performing layout into the given available <a>main-axis</a> space and infinite available <a>cross-axis</a> space.</p>
3487+
</del>
33963488

3489+
<ins>
3490+
<p>The <a>min-content cross size</a> and <a>max-content cross size</a> of a <em><a>single-line</a></em> <a>flex container</a>
3491+
is the largest <a>min-content contribution</a> or <a>max-content contribution</a> (respectively)
3492+
of its <a>flex items</a>.</p>
3493+
3494+
<p>For a <em><a>multi-line</a></em> <a>flex container</a>,
3495+
the <a>min-content cross size</a>/<a>max-content cross size</a>
3496+
is the sum of the flex line cross sizes
3497+
resulting from sizing the flex container under a <a>cross-axis</a> <a>min-content constraint</a>/<a>max-content constraint</a> (respectively).
3498+
However, if the <a>flex container</a> is ''flex-flow: column wrap;'',
3499+
then it's sized by first finding the largest
3500+
<a lt="min-content contribution">min-content</a>/<a lt="min-content contribution">max-content</a>
3501+
<a>cross-size</a> contribution among the <a>flex items</a> (respectively),
3502+
then using that size as the <a>available space</a> in the <a>cross axis</a>
3503+
for each of the <a>flex items</a> during layout.</p>
3504+
3505+
<p class="note">This heuristic for ''column wrap'' <a>flex containers</a>
3506+
gives a reasonable approximation of the size that the <a>flex container</a> should be,
3507+
with each flex item ending up as min(<var>item’s own max-content</var>, <var>maximum min-content among all items</var>),
3508+
and each <a>flex line</a> no larger than its largest <a>flex item</a>.
3509+
It's not a <em>perfect</em> fit in some cases,
3510+
but doing it completely correct is insanely expensive,
3511+
and this works reasonably well.</p>
3512+
</ins>
3513+
</blockquote>
3514+
<li id="change-2015-a11y-tools">
3515+
Add explicit conformance criteria on authoring tools
3516+
to keep presentation and DOM order in sync
3517+
unless author explicitly indicates a desire to make them out-of-sync.
3518+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-8">Issue 8</a>)
3519+
<blockquote>
3520+
<ins>
3521+
<p>In order to preserve the author's intended ordering in all presentation modes,
3522+
authoring tools&mdash;including WYSIWYG editors as well as Web-based authoring aids--
3523+
must reorder the underlying document source
3524+
and not use 'order' to perform reordering
3525+
unless the author has explicitly indicated that the underlying
3526+
document order (which determines speech and navigation order) should be
3527+
<em>out-of-sync</em> with the visual order.</p>
3528+
3529+
<div class="example">
3530+
For example, a tool might offer both drag-and-drop reordering of flex items
3531+
as well as handling of media queries for alternate layouts per screen size range.
3532+
3533+
Since most of the time, reordering should affect all screen ranges
3534+
as well as navigation and speech order,
3535+
the tool would perform drag-and-drop reordering at the DOM layer.
3536+
In some cases, however, the author may want different visual orderings per screen size.
3537+
The tool could offer this functionality by using 'order' together with media queries,
3538+
but also tie the smallest screen size's ordering to the underlying DOM order
3539+
(since this is most likely to be a logical linear presentation order)
3540+
while using 'order' to determine the visual presentation order in other size ranges.
3541+
3542+
This tool would be conformant, whereas a tool that only ever used 'order'
3543+
to handle drag-and-drop reordering
3544+
(however convenient it might be to implement it that way)
3545+
would be non-conformant.
3546+
</div>
3547+
</ins>
3548+
</blockquote>
3549+
<li id="change-2015-align-self-auto">
3550+
Defined that an 'align-self' or 'justify-self' value of ''align-self/auto''
3551+
computes to itself on absolutely-positioned elements,
3552+
for consistency with future extensions of these properties in [[CSS-ALIGN-3]].
3553+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-5">Issue 5</a>)
3554+
<blockquote>
3555+
<p>
3556+
<ins>On absolutely positioned elements,
3557+
a value of ''align-self/auto'' computes to itself.
3558+
On all other elements, a</ins> <del>A</del> value of <dfn value for=align-self>auto</dfn> for 'align-self'
3559+
computes to the value of 'align-items' on the element’s parent,
3560+
or ''align-self/stretch'' if the element has no parent.
3561+
</p>
3562+
</blockquote>
3563+
<li id="change-2015-percentage-margins">
3564+
Revert change to make percentage margins and padding relative to their own axes;
3565+
instead allow both behaviors.
3566+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-11">Issue 11</a>,
3567+
<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-16">Issue 16</a>)
3568+
<blockquote>
3569+
<del>
3570+
<p>Percentage margins and paddings on <a>flex items</a> are always resolved against their respective dimensions;
3571+
unlike blocks, they do not always resolve against the inline dimension of their containing block.</p>
3572+
</del>
3573+
<ins>
3574+
<p>Percentage margins and paddings on <a>flex items</a> can be resolved against either:</p>
3575+
<ul>
3576+
<li>their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
3577+
<li>the inline axis (left/right/top/bottom percentages all resolve against width)
3578+
</ul>
3579+
<p>A User Agent must choose one of these two behaviors.</p>
3580+
3581+
<p class="note">Note: This variance sucks, but it accurately captures the current state of the world
3582+
(no consensus among implementations, and no consensus within the CSSWG).
3583+
It is the CSSWG's intention that browsers will converge on one of the behaviors,
3584+
at which time the spec will be amended to require that.</p>
3585+
3586+
<p class="advisement">Authors should avoid using percentages in paddings or margins on <a>flex items</a> entirely,
3587+
as they will get different behavior in different browsers.</p>
3588+
</ins>
3589+
</blockquote>
3590+
<li id="change-2015-min-max-constraint">
3591+
Handle min/max constraints in sizing flex items.
3592+
<blockquote>
3593+
<ul>
3594+
<li>
3595+
<strong>Determine the available main and cross space for the flex items.</strong>
3596+
For each dimension,
3597+
if that dimension of the <a>flex container</a>’s content box is a <a>definite size</a>, use that;
3598+
<ins>if that dimension of the <a>flex container</a> is being sized under a <a lt="min-content constraint">min</a> or <a>max-content constraint</a>,
3599+
the available space in that dimension is that constraint;</ins>
3600+
otherwise, subtract the <a>flex container</a>’s margin, border, and padding
3601+
from the space available to the flex container in that dimension
3602+
and use that value.
3603+
</ul>
3604+
</blockquote>
3605+
<li id="changes-2015-first-fragment">
3606+
Correct negation in flex container fragmentation rule:
3607+
previous definition implied ''break-inside: avoid'' behavior in all cases.
3608+
(<a href="https://drafts.csswg.org/css-flexbox/issues-lc-20150514#issue-5">Issue 5</a>)
3609+
<blockquote>
3610+
<ul>
3611+
<li>
3612+
If the first fragment of the flex container is not at the top of the page,
3613+
and <del>some</del><ins>none</ins> of its flex items <del>don't</del> fit in the remaining space on the page,
3614+
the entire fragment is moved to the next page.
3615+
</ul>
3616+
</blockquote>
3617+
</ul>
3618+
33973619
<h4 id="change-201505-clarify">
33983620
Clarifications</h4>
33993621

3622+
<ul>
3623+
<li>Miscellaneous minor editorial improvements and fixes to errors in examples.
3624+
</ul>
3625+
34003626
<h3 id="changes-201409">
34013627
Changes since the 25 September 2014 LCWD</h3>
34023628

@@ -3421,8 +3647,8 @@ Substantive Changes and Bugfixes</h4>
34213647
the <i>cross size</i> of each line is the minimum size necessary [...]
34223648
<del>When a flex container (even a <i>multi-line</i> one) has only one line,</del>
34233649
<ins>In a <i>single-line</i> <i>flex container</i>,</ins>
3424-
the <i>cross size</i> of the line is the <i>cross size</i> of the flex container,
3425-
and 'align-content' has no effect.
3650+
the <i>cross size</i> of the line is the <i>cross size</i> of the flex container,
3651+
and 'align-content' has no effect.
34263652
</blockquote>
34273653

34283654
<blockquote>
@@ -3434,26 +3660,26 @@ Substantive Changes and Bugfixes</h4>
34343660
<blockquote>
34353661
<p class="note">Only <del>flex containers with multiple lines</del>
34363662
<ins><i>multi-line</i> <i>flex containers</i></ins>
3437-
ever have free space in the <i>cross-axis</i> for lines to be aligned in,
3663+
ever have free space in the <i>cross-axis</i> for lines to be aligned in,
34383664
because in a <del>flex container with a single line</del>
34393665
<ins><i>single-line</i> flex container</ins>
3440-
the sole line automatically stretches to fill the space.
3666+
the sole line automatically stretches to fill the space.
34413667
</blockquote>
34423668

34433669
<blockquote>
34443670
<p>If the flex container <del>has only one <i>flex line</i>
34453671
(even if it's a <i>multi-line</i> <i>flex container</i>)</del>
34463672
<ins>is <i>single-line</i></ins>
3447-
and has a <i>definite</i> <i>cross size</i>,
3448-
the <i>cross size</i> of the <i>flex line</i>
3449-
is the <i>flex container</i>'s inner <i>cross size</i>.
3673+
and has a <i>definite</i> <i>cross size</i>,
3674+
the <i>cross size</i> of the <i>flex line</i>
3675+
is the <i>flex container</i>'s inner <i>cross size</i>.
34503676
</blockquote>
34513677

34523678
<blockquote>
34533679
<p>If the flex container <del>has only one flex line
34543680
(even if it's a multi-line flex container),</del>
34553681
<ins>is <i>single-line</i>,</ins>
3456-
then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
3682+
then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
34573683
</blockquote>
34583684

34593685
<li id="change-201409-algo-breaks">
@@ -3478,7 +3704,7 @@ Substantive Changes and Bugfixes</h4>
34783704
<blockquote>
34793705
<p>For every unfrozen item on the line,
34803706
multiply its flex shrink factor by its <del>outer</del> <ins>inner</ins> flex base size,
3481-
and note this as its <a>scaled flex shrink factor</a>.
3707+
and note this as its <a>scaled flex shrink factor</a>.
34823708
</blockquote>
34833709

34843710
<li id="change-201409-neither">
@@ -3499,7 +3725,7 @@ Substantive Changes and Bugfixes</h4>
34993725
<blockquote>
35003726
<p>[If] ... the <a>flex item</a> has a <a>definite</a> <a>flex basis</a>,
35013727
<ins>and the <a>flex container</a> has a <a>definite</a> <a>main size</a>,</ins>
3502-
the <a>flex item’s</a> <a>main size</a> must be treated as <a>definite</a> ...
3728+
the <a>flex item’s</a> <a>main size</a> must be treated as <a>definite</a> ...
35033729
</blockquote>
35043730

35053731
<li id="change-201409-min-auto-specified-size">
@@ -3852,10 +4078,10 @@ Substantive Changes and Bugfixes</h4>
38524078
treating this used size as its definite <a>cross size</a>
38534079
so that percentage-sized children can be resolved.
38544080

3855-
<p class="note">Note that this step does not affect the main size of the flex item,
3856-
even if it has an intrinsic aspect ratio.</p>
3857-
</ins>
3858-
</blockquote>
4081+
<p class="note">Note that this step does not affect the main size of the flex item,
4082+
even if it has an intrinsic aspect ratio.</p>
4083+
</ins>
4084+
</blockquote>
38594085
<li id="change-2012-intrinsic-ratio">
38604086
Allow intrinsic aspect ratios to inform the <a href="#algo-main-item">main-size calculation.</a>
38614087
(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-8">Issue 8</a>)

0 commit comments

Comments
 (0)