You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Changed the behavior of the new ''min-width/auto'' initial value of 'min-width'/'min-height' to
2807
+
<ul>
2808
+
<li>Take into account whether 'overflow' is ''visible'', since when 'overflow' is explicitly handled, it is confusing (and unnecessary) to force enough size to show all the content.
2809
+
<li>Take into account the specified 'width'/'height', so that the implied minimum is never greater than the specified size.
2810
+
<li>Compute to itself (not to ''min-content'') on flex items, since they are no longer equivalent (due to above changes).
<p>When used as the value of a flex item's min main size property,
2819
+
this keyword indicates a minimum of the min-content size,
2820
+
to help ensure that the item is large enough to fit its contents.
2821
+
<p class='note'>
2822
+
It is intended that this will compute to the ''min-content'' keyword
2823
+
when the specification defining it (<a href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">Writing Modes Appendix D</a>) is sufficiently mature.
2824
+
</del>
2825
+
<ins>
2826
+
<p>On a <a>flex item</a> whose 'overflow' is not ''overflow/visible'',
2827
+
this keyword specifies as the minimum size the smaller of:
2828
+
2829
+
<ul>
2830
+
<li>the <a>min-content size</a>, or
2831
+
<li>the computed 'width'/'height', if that value is <a>definite</a>.
2832
+
</ul>
2833
+
</ins>
2834
+
</dl>
2835
+
</blockquote>
2804
2836
<li>
2805
2837
Specified that percentage margins/paddings on flex items are resolved against their respective dimensions,
2806
2838
not the inline dimension of the containing block like blocks do.
<p>If the flex item has ''align-self: stretch'', redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
2864
+
2865
+
<p class="note">Note that this step does not affect the main size of the flex item, even if it has an intrinsic aspect ratio.
2866
+
</ins>
2867
+
</blockquote>
2809
2868
<li>
2810
-
<a href="#intrinsic-sizes">Defined the intrinsic sizes of flex containers.</a>
2869
+
Allow intrinsic aspect ratios to inform the <a href="#algo-main-item">main-size calculation.</a>
<p><ins>If a <i>cross size</i> is needed to determine the <i>main size</i>
2888
+
(e.g. when the <i>flex item</i>’s <i>main size</i> is in its block axis)
2889
+
and the <i>flex item</i>’s cross size is ''auto'' and not <i>definite</i>,
2890
+
in this calculation use ''fit-content'' as the <i>flex item</i>’s <i>cross size</i>.</ins>
2891
+
</blockquote>
2892
+
<li>
2893
+
Defined the <a href="#intrinsic-sizes">intrinsic sizes of flex containers.</a>
2894
+
<blockquote>
2895
+
<p><strong>Determine the main size of the flex container</strong> using its main size property. <del>In this calculation, the min content main size of the flex container is the maximum of the flex container's items' min-content size contributions, and the max content main size of the flex container is the sum of the flex container's items' max-content size contributions. The min-content/max-content main size contribution of an item is its outer hypothetical main size when sized under a min-content/max-content constraint (respectively).</del> For this computation, ‘auto’ margins on flex items are treated as ‘0’.
2896
+
</blockquote>
2897
+
<blockquote>
2898
+
<ins>
2899
+
<!--
2900
+
<h3 id='intrinsic-sizes'>
2901
+
Intrinsic Sizes</h3>
2902
+
-->
2903
+
<p>
2904
+
The <i>max-content main size</i> of a <i>flex container</i>
2905
+
is the sum of the flex container's items' <i>max-size contributions</i> in the <i>main axis</i>.
2906
+
The <i>min-content main size</i> of a <i>single-line</i> flex container
2907
+
is the sum of the flex container's items' <i>min-size contributions</i> in the <i>main axis</i>;
2908
+
for a <i>multi-line</i> container,
2909
+
it is the largest of those contributions.
2910
+
2911
+
<p>
2912
+
The <i>min-content cross size</i> and <i>max-content cross size</i> of a flex container
2913
+
are the cross size of the flex container
2914
+
after performing layout into the given available <i>main-axis</i> space and infinite available <i>cross-axis</i> space.
2915
+
2916
+
<p>
2917
+
The main-size <i title="min-size contribution">min-content</i>/<i>max-size contribution</i> of a <i>flex item</i>
2918
+
is its outer <i>hypothetical main size</i>
2919
+
when sized under a <i title="min-size constraint">min-content</i>/<i>max-size constraint</i> (respectively).
2920
+
2921
+
<p>
2922
+
See [[!CSS3-SIZING]] for a definition of the terms in this section.
2923
+
</ins>
2924
+
</blockquote>
2811
2925
<li>
2812
2926
Correct an omission in the flex-line size determination, so a <i>single-line</i> flexbox will size to its contents if it doesn't have a definite size.
2927
+
<blockquote>
2928
+
<p>
2929
+
If the flex container has only one <i>flex line</i>
2930
+
(even if it's a <i>multi-line</i><i>flex container</i>)
2931
+
<ins>and has a <i>definite</i><i>cross size</i></ins>,
2932
+
the <i>cross size</i> of the <i>flex line</i>
2933
+
is the <i>flex container</i>'s inner <i>cross size</i>.
<i>Flex items</i> paint exactly the same as <del>block-level elements in the normal flow</del><ins>inline blocks [[!CSS21]]</ins>.
2947
+
</blockquote>
2817
2948
<li>
2818
-
An omitted 'flex-basis' component of the 'flex' shorthand now resolves to ''0%'' instead of ''0px''.
2949
+
An omitted 'flex-basis' component of the 'flex' shorthand now resolves to ''0%'' instead of ''0px''. Because percentages resolved against indefinite sizes behave as ''auto'', this gives better behavior in shrink-wrapped flex containers.
<p>An absolutely-positioned child of a <i>flex container</i> does not participate in flex layout
2973
+
beyond the <a href="#algo-flex-order">reordering step</a>.
2974
+
2975
+
<del>
2976
+
<p>
2977
+
However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'',
2978
+
then the used value of those properties
2979
+
are computed from its <dfn id='flex-item-static-position'>static position</dfn>, as follows:
2980
+
2981
+
<p>
2982
+
If both 'left' and 'right' are ''auto'',
2983
+
the <i>flex item</i> must be positioned so that
2984
+
its <i>main-start</i> or <i>cross-start</i> edge
2985
+
(whichever is in the horizontal axis)
2986
+
is aligned with the <i>static position</i>.
2987
+
If both 'top' and 'bottom' are ''auto'',
2988
+
the <i>flex item</i> must be positioned so that
2989
+
its <i>main-start</i> or <i>cross-start</i> edge
2990
+
(whichever is in the vertical axis)
2991
+
is aligned with the <i>static position</i>.
2992
+
2993
+
<p>
2994
+
In the <i>main axis</i>,
2995
+
2996
+
<ol>
2997
+
<li>
2998
+
If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>,
2999
+
the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>.
3000
+
3001
+
<li>
3002
+
Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>,
3003
+
the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>.
3004
+
3005
+
<li>
3006
+
Otherwise, the <i>static position</i> is determined
3007
+
by the value of 'justify-content' on the <i>flex container</i>
3008
+
as if the <i>static position</i> were represented by a zero-sized flex item.
3009
+
</ol>
3010
+
3011
+
<p>
3012
+
In the <i>cross axis</i>,
3013
+
3014
+
<ol>
3015
+
<li>
3016
+
If there is a preceding in-flow <i>flex item</i>,
3017
+
the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex line</i>
3018
+
that item is in.
3019
+
<li>
3020
+
Otherwise, the <i>static position</i> is the <i>cross-start</i> edge of the first <i>flex line</i>.
3021
+
</ol>
3022
+
3023
+
<p class='note'>
3024
+
The static position is intended to more-or-less match the position of
3025
+
an anonymous 0×0 in-flow ''align-self/flex-start''-aligned
3026
+
flex item that participates in flex layout,
3027
+
the primary difference being that any packing spaces due to
3028
+
''justify-content: space-around'' or ''justify-content: space-between''
3029
+
are suppressed around the hypothetical item:
3030
+
between it and the next item if there is a real item after it,
3031
+
else between it and the previous item (if any) if there isn't.
3032
+
</del>
3033
+
<ins>
3034
+
<p>Its static position is calculated by first doing full flex layout without the absolutely-positioned children,
3035
+
then positioning each absolutely-positioned child as if it were the sole <a>flex item</a>
3036
+
in the <a>flex container</a>,
3037
+
assuming both the child and the <a>flex container</a> were fixed size boxes of their used size.
3038
+
<div class='example'>
3039
+
For example, by default, the static position of an absolutely positioned child aligns it to the main-start/cross-start corner,
3040
+
corresponding to the default values of 'justify-content' and 'align-content' on the <a>flex container</a>.
3041
+
Setting ''justify-content:center'' on the <a>flex container</a>, however,
3042
+
would center it in the main axis.
3043
+
</div>
3044
+
</ins>
3045
+
</blockquote>
3046
+
<li>
3047
+
Changed algorithm for <a href="#resolve-flexible-lengths">resolving flexible lengths</a> to make behavior continuous as the sum of the flex factors approaches zero. (No change for a sum ≥ 1.)
<ins>(i.e. characters that can be affected by the 'white-space' property)</ins>
3084
+
is not rendered, as if it were ''display:none''.
3085
+
</blockquote>
2831
3086
<li>
2832
3087
Clarified that table anonymous box generation occurs in place of computed value conversion for internal table elements.
3088
+
<li>
3089
+
Clarified interaction of flex item determination with 'display-inside' / 'display-outside' (the new longhands of 'display' defined in the <a href="http://www.w3.org/TR/css-display/">CSS Display Module Level 3</a>.
3090
+
<blockquote>
3091
+
<ins><p>If the specified 'display-outside' of an in-flow child of an element that generates a <a>flex container</a>
3092
+
is ''inline-level'',
3093
+
it computes to ''block-level''.
3094
+
(This effectively converts any inline 'display' values to their block equivalents.)
3095
+
</ins>
3096
+
</blockquote>
2833
3097
<li>
2834
3098
Clarified that 'overflow' applies to flex containers.
2835
3099
<li>
@@ -2838,13 +3102,63 @@ Boris Zbarsky.
2838
3102
Clarify that <a value for=align-self>stretch</a> checks for the <em>computed</em> value of the cross-size property being <a value for=width>auto</a>,
2839
3103
which means that percentage cross-sizes that behave as <a value for=width>auto</a>
2840
3104
(because they don't resolve against definite sizes) aren't stretched.
If the <i>cross size property</i> of the <i>flex item</i><del>is</del><ins>computes to</ins><a value for=width>auto</a>,
3112
+
its used value is …
3113
+
</dl>
3114
+
</blockquote>
3115
+
<blockquote>
3116
+
<p><strong>Determine the used cross size of each flex item.</strong>
3117
+
If a flex item has ''align-self: stretch'',
3118
+
its <ins>computed</ins> cross size property is <a value for=width>auto</a>,
3119
+
and …
3120
+
</blockquote>
3121
+
<li>
3122
+
Clarify that the rules of the formatting context are used for determining the flex container's main size.
3123
+
<blockquote>
3124
+
<strong>Determine the main size of the flex container</strong> using <ins>the rules of the formatting context in which it participates</ins><del>its main size property</del>.
3125
+
</blockquote>
2841
3126
<li>
2842
3127
Clarified that 'order'-modified document order is used instead of raw document order when painting.
2843
3128
(This was already stated in the 'order' section, but not in the section explicitly about painting order.)
2844
3129
<li>
2845
-
Clarified where zero-main-size flex items go when they're at the end of a line.
3130
+
Clarified line-breaking to precisely handle negatively-sized flex items and zero-size items at the end of a line. (<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-1">Issue 1</a>)
3131
+
<blockquote>
3132
+
<p> Otherwise,
3133
+
starting from the first uncollected item,
3134
+
collect <ins>consecutive items one by one
3135
+
until the first time that the <em>next</em> collected item
3136
+
would not fit into the flex container's inner main size,
3137
+
or until a forced break is encountered.
3138
+
If the very first uncollected item wouldn't fit,
3139
+
collect just it into the line</ins>
3140
+
<del>as many consecutive flex items as will fit
3141
+
or until a forced break is encountered
3142
+
(but collect at least one)
3143
+
into the flex container's inner main size into a flex line</del>.
3144
+
</blockquote>
3145
+
<blockquote>
3146
+
<p class="note">Note that <del>items with zero main size will never start a line unless they're the very first items in the flex container, or they're preceded by a forced break.</del> The "collect as many" line will collect <del>them</del><ins>zero-sized flex items</ins> onto the end of the previous line even if the last non-zero item exactly "filled up" the line.
3147
+
</blockquote>
2846
3148
<li>
2847
-
Clarified that flex container cross sizes are still clamped by the flex container's min/max properties.
3149
+
Clarified that flex container cross sizes are still clamped by the flex container's min/max properties. (<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-24">Issue 24</a>)
3150
+
<blockquote>
3151
+
<ul>
3152
+
<li>
3153
+
If the cross size property is a <i>definite</i> size,
3154
+
use that,
3155
+
<ins>clamped by the min and max cross size properties of the <a>flex container</a></ins>.
3156
+
<li>
3157
+
Otherwise,
3158
+
use the sum of the flex lines' cross sizes,
3159
+
<ins>clamped by the min and max cross size properties of the <a>flex container</a></ins>.
3160
+
</ul>
3161
+
</blockquote>
2848
3162
</ul>
2849
3163
2850
3164
<p>A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-cr-2012">Disposition of Candidate Recommendation Comments</a> is available.
0 commit comments