- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 24 Nov 2011 19:59:09 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv2883
Modified Files:
Overview.html
Log Message:
Generated. Do not edit!
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.72
retrieving revision 1.73
diff -u -d -r1.72 -r1.73
--- Overview.html 30 Sep 2011 22:31:11 -0000 1.72
+++ Overview.html 24 Nov 2011 19:59:07 -0000 1.73
@@ -16,12 +16,12 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 30 September 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 November 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110930/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110930/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111124/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111124/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -64,13 +64,13 @@
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2011 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
- title="European Research Consortium for Informatics and
- Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
+ href="http://www.w3.org/"><acronym
+ title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
+ href="http://www.csail.mit.edu/"><acronym
+ title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
+ href="http://www.ercim.eu/"><acronym
+ title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+ <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -242,9 +242,9 @@
<p>An element with ‘<code class=css>display:flexbox</code>’ or
‘<code class=css>display:inline-flexbox</code>’ is a <dfn
id=flexbox>flexbox</dfn>. Block-level children of a flexbox, and some
- other types of children, are called <dfn id=flexbox-item title="flexbox
- item|flexbox items|flexbox item's">flexbox items</dfn> and are laid out
- using the flexbox box model. <span class=note>(See the <a
+ other types of children, are called <dfn id=flexbox-item
+ title="flexbox item|flexbox items|flexbox item's">flexbox items</dfn> and
+ are laid out using the flexbox box model. <span class=note>(See the <a
href="#flex-items">Flexbox Items</a> chapter, below, for specifics on
which children are <a href="#flexbox-item"><i>flexbox items</i></a>
directly and which children are instead wrapped in anonymous boxes which
@@ -334,18 +334,16 @@
<p>This will render approximately like the following:</p>
- <p style="border: thin solid black; background: white; width: 500px;
- padding: 5px; overflow: hidden;">
- <button style="float: left; width: 200px; height: 40px; margin-right:
- 50px;">Child 1<br>
- Another Line</button>
-
- <button style="float: left; width: 100px; height: 22px; margin-top:
- 9px;">Child 2</button>
-
- <button style="float: right; width: 100px; height: 22px; margin-top:
- 9px;">Child 3</button>
- </p>
+ <p
+ style="border: thin solid black; background: white; width: 500px; padding: 5px; overflow: hidden;">
+ <button
+ style="float: left; width: 200px; height: 40px; margin-right: 50px;">Child
+ 1<br>
+ Another Line</button> <button
+ style="float: left; width: 100px; height: 22px; margin-top: 9px;">Child
+ 2</button> <button
+ style="float: right; width: 100px; height: 22px; margin-top: 9px;">Child
+ 3</button></p>
</div>
<h3 id=display-flexbox><span class=secno>2.1. </span> New values for
@@ -756,14 +754,8 @@
order will be:</p>
<div style="border: medium solid green; display: inline-block;">
- <button>Two</button>
-
- <button>Four</button>
-
- <button>One</button>
-
- <button>Three</button>
- </div>
+ <button>Two</button> <button>Four</button> <button>One</button>
+ <button>Three</button></div>
</div>
<p class=issue>Add a realistic example of tab reordering.
@@ -782,10 +774,11 @@
class=css>flex()</code>’ function</h3>
<p>The ‘<code class=css>flex()</code>’ function is used to
- specify the parameters of a <dfn id=flexible-length0 title="flexible
- length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn
- id=positive-flexibility title="positive flexibility">positive</dfn> and
- <dfn id=negative-flexibility>negative flexibility</dfn>, and the <dfn
+ specify the parameters of a <dfn id=flexible-length0
+ title="flexible length|flexible lengths|flexible length's">flexible
+ length</dfn>: the <dfn id=positive-flexibility
+ title="positive flexibility">positive</dfn> and <dfn
+ id=negative-flexibility>negative flexibility</dfn>, and the <dfn
id=preferred-size>preferred size</dfn>. The syntax of the ‘<code
class=css>flex()</code>’ function is:
@@ -1216,14 +1209,10 @@
the line, or 300 pixels.</p>
<div style="width:300px; border:medium solid green; overflow: hidden;">
- <button style="width:100px; float: left;">Elephant</button>
-
- <button style="width:100px; float: left;">Tiger</button>
-
- <button style="width:100px; float: left;">Antelope</button>
-
- <button style="width:300px; float: left;">Wildebeest</button>
- </div>
+ <button style="width:100px; float: left;">Elephant</button> <button
+ style="width:100px; float: left;">Tiger</button> <button
+ style="width:100px; float: left;">Antelope</button> <button
+ style="width:300px; float: left;">Wildebeest</button></div>
<p>If the box was resized, the buttons may rearrange onto different lines
as necessary.</p>
@@ -1254,14 +1243,11 @@
equally on either side.</p>
<div style="width:300px; border:medium solid green; text-align:center;">
- <button style="width:90px; float: left; margin-left: 15px;">Elephant</button>
-
- <button style="width:90px; float: left;">Tiger</button>
-
- <button style="width:90px; float: left;">Antelope</button>
-
- <button style="width:90px">Wildebeest</button>
- </div>
+ <button
+ style="width:90px; float: left; margin-left: 15px;">Elephant</button>
+ <button style="width:90px; float: left;">Tiger</button> <button
+ style="width:90px; float: left;">Antelope</button> <button
+ style="width:90px">Wildebeest</button></div>
</div>
<h3 id=flex-line-pack><span class=secno>6.1. </span> ‘<a
@@ -1625,17 +1611,17 @@
<li>column-reverse, <a href="#flex-flow-column-reverse"
title=column-reverse><strong>3.1.</strong></a>
- <li>cross axis, <a href="#cross-axis" title="cross
- axis"><strong>2.</strong></a>
+ <li>cross axis, <a href="#cross-axis"
+ title="cross axis"><strong>2.</strong></a>
<li>cross-end, <a href="#cross-end"
title=cross-end><strong>2.</strong></a>
- <li>cross size, <a href="#cross-size" title="cross
- size"><strong>2.</strong></a>
+ <li>cross size, <a href="#cross-size"
+ title="cross size"><strong>2.</strong></a>
- <li>cross size property, <a href="#cross-size-property" title="cross size
- property"><strong>2.</strong></a>
+ <li>cross size property, <a href="#cross-size-property"
+ title="cross size property"><strong>2.</strong></a>
<li>cross-start, <a href="#cross-start"
title=cross-start><strong>2.</strong></a>
@@ -1649,27 +1635,28 @@
<li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
- <li>flexbox item, <a href="#flexbox-item" title="flexbox
- item"><strong>2.</strong></a>
+ <li>flexbox item, <a href="#flexbox-item"
+ title="flexbox item"><strong>2.</strong></a>
- <li>flexbox items, <a href="#flexbox-item" title="flexbox
- items"><strong>2.</strong></a>
+ <li>flexbox items, <a href="#flexbox-item"
+ title="flexbox items"><strong>2.</strong></a>
- <li>flexbox item's, <a href="#flexbox-item" title="flexbox
- item's"><strong>2.</strong></a>
+ <li>flexbox item's, <a href="#flexbox-item"
+ title="flexbox item's"><strong>2.</strong></a>
<li>flex-flow, <a href="#flex-flow0"
title=flex-flow><strong>3.1.</strong></a>
- <li>flexible length, <a href="#flexible-length" title="flexible
- length"><strong>4.</strong></a>, <a href="#flexible-length0"
+ <li>flexible length, <a href="#flexible-length"
+ title="flexible length"><strong>4.</strong></a>, <a
+ href="#flexible-length0"
title="flexible length"><strong>4.1.</strong></a>
- <li>flexible lengths, <a href="#flexible-length0" title="flexible
- lengths"><strong>4.1.</strong></a>
+ <li>flexible lengths, <a href="#flexible-length0"
+ title="flexible lengths"><strong>4.1.</strong></a>
- <li>flexible length's, <a href="#flexible-length0" title="flexible
- length's"><strong>4.1.</strong></a>
+ <li>flexible length's, <a href="#flexible-length0"
+ title="flexible length's"><strong>4.1.</strong></a>
<li>flex-line-pack, <a href="#flex-line-pack0"
title=flex-line-pack><strong>6.1.</strong></a>
@@ -1687,16 +1674,16 @@
title=justify><strong>6.1.</strong></a>, <a href="#flex-pack-justify"
title=justify><strong>5.1.</strong></a>
- <li>main axis, <a href="#main-axis" title="main
- axis"><strong>2.</strong></a>
+ <li>main axis, <a href="#main-axis"
+ title="main axis"><strong>2.</strong></a>
<li>main-end, <a href="#main-end" title=main-end><strong>2.</strong></a>
- <li>main size, <a href="#main-size" title="main
- size"><strong>2.</strong></a>
+ <li>main size, <a href="#main-size"
+ title="main size"><strong>2.</strong></a>
- <li>main size property, <a href="#main-size-property" title="main size
- property"><strong>2.</strong></a>
+ <li>main size property, <a href="#main-size-property"
+ title="main size property"><strong>2.</strong></a>
<li>main-start, <a href="#main-start"
title=main-start><strong>2.</strong></a>
@@ -1704,14 +1691,14 @@
<li>multi-line, <a href="#multi-line"
title=multi-line><strong>6.</strong></a>
- <li>negative flexibility, <a href="#negative-flexibility" title="negative
- flexibility"><strong>4.1.</strong></a>
+ <li>negative flexibility, <a href="#negative-flexibility"
+ title="negative flexibility"><strong>4.1.</strong></a>
- <li>positive flexibility, <a href="#positive-flexibility" title="positive
- flexibility"><strong>4.1.</strong></a>
+ <li>positive flexibility, <a href="#positive-flexibility"
+ title="positive flexibility"><strong>4.1.</strong></a>
- <li>preferred size, <a href="#preferred-size" title="preferred
- size"><strong>4.1.</strong></a>
+ <li>preferred size, <a href="#preferred-size"
+ title="preferred size"><strong>4.1.</strong></a>
<li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>
Received on Thursday, 24 November 2011 19:59:13 UTC