Mercurial > drafts / changeset

     1.1 --- a/css3-flexbox/Overview.html	Tue Aug 28 14:08:49 2012 -0700
     1.2 +++ b/css3-flexbox/Overview.html	Tue Aug 28 14:35:09 2012 -0700
     1.3 @@ -2389,7 +2389,8 @@
     1.4      href="#align-self"><code class=property>align-self</code></a>’, any
     1.5      positive free space is distributed to auto margins in that dimension.
     1.6  
     1.7 -   <li> Margin-based alignment has no effect on overflowing elements.
     1.8 +   <li> Overflowing elements ignore their auto margins and overflow in the
     1.9 +    end/foot direction.
    1.10    </ul>
    1.11  
    1.12    <p class=note> Note that, if free space is distributed to auto margins, the
    1.13 @@ -2729,6 +2730,11 @@
    1.14     href="#align-items"><code class=property>align-items</code></a>’ on
    1.15     their associated flex container.)
    1.16  
    1.17 +  <p> If either of the <a href="#flex-item"><i>flex item's</i></a> cross-axis
    1.18 +   margins are ‘<code class=css>auto</code>’, ‘<a
    1.19 +   href="#align-self"><code class=property>align-self</code></a>’ has no
    1.20 +   effect.
    1.21 +
    1.22    <p> A value of <dfn id=align-self-auto title="align-self: auto">‘<code
    1.23     class=css>auto</code>’</dfn> for ‘<a href="#align-self"><code
    1.24     class=property>align-self</code></a>’ computes to the value of ‘<a
    1.25 @@ -3179,8 +3185,8 @@
    1.26      size contribution of an item is its outer <a
    1.27      href="#hypothetical-main-size"><i>hypothetical main size</i></a> when
    1.28      sized under a min-content/max-content constraint (respectively). For this
    1.29 -    computation, ‘<code class=css>auto</code>’ margins are treated as
    1.30 -    ‘<code class=css>0</code>’.
    1.31 +    computation, ‘<code class=css>auto</code>’ margins on flex items are
    1.32 +    treated as ‘<code class=css>0</code>’.
    1.33    </ol>
    1.34  
    1.35    <h3 id=main-sizing><span class=secno>9.3. </span> Main Size Determination</h3>
    1.36 @@ -3314,10 +3320,18 @@
    1.37    <ol class=continue>
    1.38     <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<code
    1.39      class=css>auto</code>’ margins.</strong> If a flex item has ‘<code
    1.40 -    class=css>auto</code>’ cross-axis margins, and its outer cross size
    1.41 -    (treating those ‘<code class=css>auto</code>’ margins as zero) is
    1.42 -    less than the cross size of its flex line, distribute the difference in
    1.43 -    those sizes equally to the ‘<code class=css>auto</code>’ margins.
    1.44 +    class=css>auto</code>’ cross-axis margins:
    1.45 +    <ul>
    1.46 +     <li> If its outer cross size (treating those ‘<code
    1.47 +      class=css>auto</code>’ margins as zero) is less than the cross size
    1.48 +      of its flex line, distribute the difference in those sizes equally to
    1.49 +      the ‘<code class=css>auto</code>’ margins.
    1.50 +
    1.51 +     <li> Otherwise, if the start or head margin (whichever is in the cross
    1.52 +      axis) is ‘<code class=css>auto</code>’, set it to zero; set the
    1.53 +      opposite margin so that the outer cross size of the item equals the
    1.54 +      cross size of its flex line.
    1.55 +    </ul>
    1.56  
    1.57     <li id=algo-cross-align> <strong>Align all flex items along the
    1.58      cross-axis</strong> per ‘<a href="#align-self"><code

     2.1 --- a/css3-flexbox/Overview.src.html	Tue Aug 28 14:08:49 2012 -0700
     2.2 +++ b/css3-flexbox/Overview.src.html	Tue Aug 28 14:35:09 2012 -0700
     2.3 @@ -1785,7 +1785,7 @@
     2.4  			any positive free space is distributed to auto margins in that dimension.
     2.5  
     2.6  		<li>
     2.7 -			Margin-based alignment has no effect on overflowing elements.
     2.8 +			Overflowing elements ignore their auto margins and overflow in the end/foot direction.
     2.9  	</ul>
    2.10  
    2.11  	<p class='note'>
    2.12 @@ -2037,6 +2037,10 @@
    2.13  		'align-self' always matches the value of 'align-items' on their associated flex container.)
    2.14  
    2.15  	<p>
    2.16 +		If either of the <i>flex item's</i> cross-axis margins are ''auto'',
    2.17 +		'align-self' has no effect.
    2.18 +
    2.19 +	<p>
    2.20  		A value of <dfn title="align-self: auto" id="align-self-auto">''auto''</dfn> for 'align-self' 
    2.21  		computes to the value of 'align-items' on the element's parent,
    2.22  		or <a href='#align-items-stretch'>''stretch''</a> if the element has no parent.
    2.23 @@ -2444,7 +2448,7 @@
    2.24  			The min-content/max-content main size contribution of an item is
    2.25  			its outer <i>hypothetical main size</i>
    2.26  			when sized under a min-content/max-content constraint (respectively).
    2.27 -			For this computation, ''auto'' margins are treated as ''0''.
    2.28 +			For this computation, ''auto'' margins on flex items are treated as ''0''.
    2.29  	</ol>
    2.30  
    2.31  <h3 id='main-sizing'>
    2.32 @@ -2598,12 +2602,23 @@
    2.33  	<ol class=continue>
    2.34  		<li id='algo-cross-margins'>
    2.35  			<strong>Resolve cross-axis ''auto'' margins.</strong>
    2.36 -			If a flex item has ''auto'' cross-axis margins,
    2.37 -			and its outer cross size
    2.38 -			(treating those ''auto'' margins as zero)
    2.39 -			is less than the cross size of its flex line,
    2.40 -			distribute the difference in those sizes equally
    2.41 -			to the ''auto'' margins.
    2.42 +			If a flex item has ''auto'' cross-axis margins:
    2.43 +
    2.44 +			<ul>
    2.45 +				<li>
    2.46 +					If its outer cross size
    2.47 +					(treating those ''auto'' margins as zero)
    2.48 +					is less than the cross size of its flex line,
    2.49 +					distribute the difference in those sizes equally
    2.50 +					to the ''auto'' margins.
    2.51 +				<li>
    2.52 +					Otherwise,
    2.53 +					if the start or head margin (whichever is in the cross axis)
    2.54 +					is ''auto'', set it to zero;
    2.55 +					set the opposite margin so that the outer cross size of the item
    2.56 +					equals the cross size of its flex line.
    2.57 +			</ul>
    2.58 +
    2.59  
    2.60  		<li id='algo-cross-align'>
    2.61  			<strong>Align all flex items along the cross-axis</strong> per 'align-self',