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
<p>The margins of adjacent <adata-link-type="dfn" href="#flex-item">flex items</a> do not <ahref="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>.</p>
822
822
<p>Percentage margins and paddings on <adata-link-type="dfn" href="#flex-item">flex items</a> are always resolved against their own axis:
823
-
left and right margins resolve against the containing’s block width,
823
+
left and right margins resolve against the containing block’s width,
824
824
and top and bottom margins resolve against the containing block’s height.
825
825
Unlike blocks, <adata-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#block-axis">block-axis</a> margins do not resolve against
826
826
the inline dimension of their containing block.</p>
the alignment properties will have no effect in that dimension
1746
1746
because the margins will have stolen all the free space
1747
1747
left over after flexing.</p>
1748
-
<divclass="example" id="example-c2f4f7f3">
1749
-
<aclass="self-link" href="#example-c2f4f7f3"></a> One use of <spanclass="css">auto</span> margins in the main axis is to separate flex items into distinct "groups".
1748
+
<divclass="example" id="example-f1650544">
1749
+
<aclass="self-link" href="#example-f1650544"></a> One use of <spanclass="css">auto</span> margins in the main axis is to separate flex items into distinct "groups".
1750
1750
The following example shows how to use this to reproduce a common UI pattern -
1751
1751
a single bar of actions with some aligned on the left and others aligned on the right.
<li> For each <adata-link-type="dfn" href="#flex-item">flex item</a>,
2440
2436
subtract its outer <adata-link-type="dfn" href="#flex-base-size">flex base size</a> from its <adata-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution">max-content contribution</a> size.
2441
-
If that result is not zero, divide it by its <adata-link-type="dfn" href="#flex-grow-factor">flex grow factor</a>(if the result was positive)
2442
-
or by its <adata-link-type="dfn" href="#scaled-flex-shrink-factor">scaled flex shrink factor</a> (if the result was negative).
2437
+
If that result is not zero, divide it by (if the result was positive) its <adata-link-type="dfn" href="#flex-grow-factor">flex grow factor</a>floored at 1,
2438
+
or (if the result was negative) by its <adata-link-type="dfn" href="#scaled-flex-shrink-factor">scaled flex shrink factor</a>, having floored the <adata-link-type="dfn" href="#flex-shrink-factor">flex shrink factor</a> at 1.
2443
2439
This is the item’s <var>max-content flex fraction</var>.
2444
2440
<li> Place all <adata-link-type="dfn" href="#flex-item">flex items</a> into lines of infinite length.
0 commit comments