W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-flexbox Overview.html,1.92,1.93 Overview.src.html,1.92,1.93

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Wed, 18 Jan 2012 00:59:45 +0000
To: public-css-commits@w3.org
Message-Id: <E1RnJsP-0003IS-4g@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv12658

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Added diagram for flex-pack. Fixed markup error from last commit.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.92
retrieving revision 1.93
diff -u -d -r1.92 -r1.93
--- Overview.html	18 Jan 2012 00:10:22 -0000	1.92
+++ Overview.html	18 Jan 2012 00:59:43 -0000	1.93
@@ -1152,21 +1152,24 @@
 
    <dt><dfn id=flex-pack-distribute>distribute</dfn>
 
-   <dd><i>Flexbox items are evenly distributed in the line, with half-size
-    spaces on either end. If the leftover free-space is negative or there is
-    only a single <a href="#flexbox-item"><i>flexbox item</i></a> on the
-    line, this value is identical to &lsquo;<a
-    href="#flex-line-pack-center"><code class=css>center</code></a>&rsquo;.
-    Otherwise, the <a href="#flexbox-item"><i>flexbox items</i></a> on the
-    line are distributed such that the empty space between any two adjacent
-    <a href="#flexbox-item"><i>flexbox items</i></a> on the line is the same,
+   <dd><a href="#flexbox-item"><i>Flexbox items</i></a> are evenly
+    distributed in the line, with half-size spaces on either end. If the
+    leftover free-space is negative or there is only a single <a
+    href="#flexbox-item"><i>flexbox item</i></a> on the line, this value is
+    identical to &lsquo;<a href="#flex-line-pack-center"><code
+    class=css>center</code></a>&rsquo;. Otherwise, the <a
+    href="#flexbox-item"><i>flexbox items</i></a> on the line are distributed
+    such that the empty space between any two adjacent <a
+    href="#flexbox-item"><i>flexbox items</i></a> on the line is the same,
     and the empty space before the first and after the last <a
     href="#flexbox-item"><i>flexbox items</i></a> on the line are half the
-    size of the other empty spaces.</i>
+    size of the other empty spaces.
   </dl>
 
-  <div class=example>
-   <p class=issue>TODO: Examples showing the four values.</p>
+  <div class=figure> <img height=270 src="images/flex-pack.svg" width=504>
+   <p class=caption>An illustration of the five &lsquo;<a
+    href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;
+    keywords and their effects on a flexbox with three colored items.</p>
   </div>
 
   <p class=note>A previous revision of this spec allowed margins to flex

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.92
retrieving revision 1.93
diff -u -d -r1.92 -r1.93
--- Overview.src.html	18 Jan 2012 00:10:22 -0000	1.92
+++ Overview.src.html	18 Jan 2012 00:59:43 -0000	1.93
@@ -515,11 +515,12 @@
 		<dd><i>Flexbox items</i> are evenly distributed in the line.  If the leftover free-space is negative or there is only a single <i>flexbox item</i> on the line, this value is identical to ''start''.  Otherwise, the <i>main-start</i> margin edge of the first <i>flexbox item</i> on the line is placed flush with the <i>main-start</i> edge of the line, the <i>main-end</i> margin edge of the last <i>flexbox item</i> on the line is placed flush with the <i>main-end</i> edge of the line, and the remaining <i>flexbox items</i> on the line are distributed so that the empty space between any two adjacent items is the same.</dd>
 
 		<dt><dfn id='flex-pack-distribute'>distribute</dfn></dt>
-		<dd><i>Flexbox items are evenly distributed in the line, with half-size spaces on either end.  If the leftover free-space is negative or there is only a single <i>flexbox item</i> on the line, this value is identical to ''center''.  Otherwise, the <i>flexbox items</i> on the line are distributed such that the empty space between any two adjacent <i>flexbox items</i> on the line is the same, and the empty space before the first and after the last <i>flexbox items</i> on the line are half the size of the other empty spaces.</dd>
+		<dd><i>Flexbox items</i> are evenly distributed in the line, with half-size spaces on either end.  If the leftover free-space is negative or there is only a single <i>flexbox item</i> on the line, this value is identical to ''center''.  Otherwise, the <i>flexbox items</i> on the line are distributed such that the empty space between any two adjacent <i>flexbox items</i> on the line is the same, and the empty space before the first and after the last <i>flexbox items</i> on the line are half the size of the other empty spaces.</dd>
 	</dl>
 
-	<div class=example>
-		<p class=issue>TODO: Examples showing the four values.</p>
+	<div class="figure">
+		<img src="images/flex-pack.svg" width=504 height=270>
+		<p class='caption'>An illustration of the five 'flex-pack' keywords and their effects on a flexbox with three colored items.</p>
 	</div>
 
 	<p class='note'>A previous revision of this spec allowed margins to flex directly, which allowed an effect similar to 'flex-pack'.  In particular, it allowed an author to, for example, split a flexbox in half, with some of the items pushed toward the start and the rest pushed toward the end, by flexing exactly one margin.  This sort of effect is no longer possible without either using the ::before or ::after pseudoelements or adding additional elements to the document, to act as an empty item that can then flex.  It's expected that we will develop something in the future to make this easier, such as a more general pseudoelement or perhaps the ability to explicitly control individual spaces between flexbox items.</p>
Received on Wednesday, 18 January 2012 00:59:47 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:49 UTC