added example and a picture for flex property intro

Author: alexmog1

css3-flexbox/Overview.html

@@ -29,11 +29,11 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 28 February 2012</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 29 February 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120228/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120228/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120229/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120229/</a>-->
 
 
     <dd><a
@@ -78,7 +78,7 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 28 February 2012</h2>
 
     <dd><a
      href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
-     with subject line "<code>[css3-flexbox] �message topic�</code>"
+     with subject line "<code>[css3-flexbox] …message topic…</code>"
 
     <dt>Editors:
 
@@ -344,12 +344,12 @@ <h3 id=values><span class=secno>1.2. </span> Values</h3>
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
    definition conventions</a> from <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
-   this specification are defined in CSS Level 2 Revision 1 <a href="#CSS21"
-   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may expand
-   the definitions of these value types: for example <a href="#CSS3COLOR"
-   rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, when combined with
-   this module, expands the definition of the &lt;color&gt; value type as
-   used in this specification.
+   this specification are defined in CSS Level 2 Revision 1 <a
+   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
+   modules may expand the definitions of these value types: for example <a
+   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
+   when combined with this module, expands the definition of the
+   &lt;color&gt; value type as used in this specification.
 
   <p>In addition to the property-specific values listed in their definitions,
    all properties defined in this specification also accept the <a
@@ -1257,34 +1257,23 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
 
   <div class=example>
    <p>Flexibility allows elements to respond directly to the available space,
-    in ways that are difficult or impossible in normal CSS. One common
-    example is a page with one segment intended to stay on screen, and
-    another section which may be long but which shouldn't scroll the page,
-    like a chat room:</p>
+    optionally taking into account size of content:</p>
 
    <pre>
 &lt;!DOCTYPE html>
-&lt;body>
-  &lt;header>Channel: #csswg  Topic: CSS IS AWE    SOME&lt;/header>
-  &lt;article id='messages'>
-  	&lt;p>&lt;b>Tab Atkins:&lt;/b> 
-  	  I think the layout algorithm is done.&lt;/p>
-  	&lt;p>&lt;b>Fantasai:&lt;/b> 
-  	  SUBMIT BEFORE ZOD.&lt;/p>
-  	...
-  &lt;/article>
-  &lt;form>
-  	&lt;input name='message'>
-  	&lt;button type='submit'>Send&lt;/button>
-  &lt;/form>
- &lt;/body>
- &lt;style>
- body { display:flexbox; flex-flow: column; }
- #messages { flex:1; }
- &lt;/style></pre>
-
-   <p class=issue>Illustrate this example.</p>
-  </div>
+&lt;style>
+	div { display:flexbox; outline:1px solid silver; }
+	p { flex:1 auto; margin:1em; background:gold; }
+&lt;/style&gt;
+&lt;div&gt;
+	&lt;p&gt;&quot;flexing&quot;&lt;/p&gt;
+	&lt;p&gt;allows the items to get bigger&lt;/p&gt;
+	&lt;p&gt;or&lt;/p&gt;
+	&lt;p&gt;smaller&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+   <img alt="items with equal flexibility extend by equal amount"
+   src="images/wp7zxxyu.gif"></div>
 
   <h2 id=alignment><span class=secno>8. </span> Alignment</h2>
 
@@ -2126,9 +2115,9 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
    class=property>break-</code>&rsquo; properties are supported on flexbox,
    on flexbox items and inside flexbox items.
 
-  <p>The following breaking rules refer to fragmentation container as �page�.
-   The same rules apply to any other fragmenters. Change �page� to the
-   appropriate fragmenter type as needed.
+  <p>The following breaking rules refer to fragmentation container as
+   “page”. The same rules apply to any other fragmenters. Change
+   “page” to the appropriate fragmenter type as needed.
 
   <p>Breaks in and around flexbox are determined as follows:
 
@@ -2137,9 +2126,9 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
     have effect as normal. If breaks inside flexbox are allowed, break points
     are determined using following rules.
 
-   <li>When flexbox is continued after a break, flexbox�s available space in
-    block direction is reduced by space consumed in previous pages. Consumed
-    space before page break is:
+   <li>When flexbox is continued after a break, flexbox’s available space
+    in block direction is reduced by space consumed in previous pages.
+    Consumed space before page break is:
     <ol>
      <li>If flexbox starts on that page: the distance between start of
       content box of the flexbox and the end of available space
@@ -2177,7 +2166,8 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
     id=break-inside-a-flexbox-item-is-considere>break inside a flexbox item
     is considered</dfn> as follows:
     <ol>
-     <li>If the item has �break-inside:avoid�, it is pushed to the next page
+     <li>If the item has “break-inside:avoid”, it is pushed to the next
+      page
 
      <li>Otherwise, it may be broken, according to breaking rules and
       algorithms applicable to its display type.
@@ -2204,12 +2194,12 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
       main-axis sizes of items until total size exceeds avaialble space or a
       forced break is encountered.
 
-     <li>If border box of an item doesn�t fit in available space, a break
+     <li>If border box of an item doesn’t fit in available space, a break
       inside the item is considered
 
      <li>
       <p>Items that fit on a page completely or partially are aligned
-       according to �flex-pack� property, independently from the rest of
+       according to ‘flex-pack’ property, independently from the rest of
        flexbox content.</p>
 
       <p>Note that flexible lenghts are not recalculated on each page, even
@@ -2229,8 +2219,8 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
      <li>Items are collected in lines and laid out as usual, but in available
       space on current page.
 
-     <li>If border box of an item doesn�t fit on main-axis and it is the only
-      item in its line:
+     <li>If border box of an item doesn’t fit on main-axis and it is the
+      only item in its line:
       <ol>
        <li>If the flexbox is not at the top of the page, it is moved to the
         next page.
@@ -2267,11 +2257,11 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
      <li>Any items with baseline alignment must be aligned before considering
       breaks inside items.
 
-     <li>If border box of an item doesn�t fit in current page, a break inside
-      the item is considered
+     <li>If border box of an item doesn’t fit in current page, a break
+      inside the item is considered
 
      <li>Items that have fit completely on a previous page and items that are
-      pushed to next page don�t have any rendering, leaving empty space as
+      pushed to next page don’t have any rendering, leaving empty space as
       needed.
 
      <li>Items that fit completely or partially on current page are aligned
@@ -2346,26 +2336,27 @@ <h2 id=conformance><span class=secno>11. </span> Conformance</h2>
   <h3 id=conventions><span class=secno>11.1. </span> Document conventions</h3>
 
   <p>Conformance requirements are expressed with a combination of descriptive
-   assertions and RFC 2119 terminology. The key words �MUST�, �MUST NOT�,
-   �REQUIRED�, �SHALL�, �SHALL NOT�, �SHOULD�, �SHOULD NOT�, �RECOMMENDED�,
-   �MAY�, and �OPTIONAL� in the normative parts of this document are to be
-   interpreted as described in RFC 2119. However, for readability, these
-   words do not appear in all uppercase letters in this specification.
+   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
+   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
+   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
+   normative parts of this document are to be interpreted as described in RFC
+   2119. However, for readability, these words do not appear in all uppercase
+   letters in this specification.
 
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a
    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
 
-  <p>Examples in this specification are introduced with the words �for
-   example� or are set apart from the normative text with
+  <p>Examples in this specification are introduced with the words “for
+   example” or are set apart from the normative text with
    <code>class="example"</code>, like this:
 
   <div class=example>
    <p>This is an example of an informative example.</p>
   </div>
 
-  <p>Informative notes begin with the word �Note� and are set apart from the
-   normative text with <code>class="note"</code>, like this:
+  <p>Informative notes begin with the word “Note” and are set apart from
+   the normative text with <code>class="note"</code>, like this:
 
   <p class=note>Note, this is an informative note.
 
@@ -2499,7 +2490,7 @@ <h3 id=cr-exit-criteria><span class=secno>11.6. </span> CR exit criteria</h3>
 
      <li>is available to the general public. The implementation may be a
       shipping product or other publicly available version (i.e., beta
-      version, preview release, or �nightly build�). Non-shipping product
+      version, preview release, or “nightly build”). Non-shipping product
       releases must have implemented the feature(s) for a period of at least
       one month in order to demonstrate stability.
 

css3-flexbox/Overview.src.html

@@ -608,31 +608,26 @@ <h2 id='flexibility'>
 	<p>A ''&lt;flex>'' value is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently.  ''&lt;flex>'' can also transition to and from a &lt;length>, by treating the length as if it were a flexible length with a positive and negative flexibility of zero and a preferred size of the length.</p>
 
 	<div class='example'>
-		<p>Flexibility allows elements to respond directly to the available space, in ways that are difficult or impossible in normal CSS.  One common example is a page with one segment intended to stay on screen, and another section which may be long but which shouldn't scroll the page, like a chat room:</p>
+		<p>Flexibility allows elements to respond directly to the available space, 
+		optionally taking into account size of content:</p>
 
 		<pre>
 &lt;!DOCTYPE html>
-&lt;body>
-  &lt;header>Channel: #csswg  Topic: CSS IS AWE    SOME&lt;/header>
-  &lt;article id='messages'>
-  	&lt;p>&lt;b>Tab Atkins:&lt;/b> 
-  	  I think the layout algorithm is done.&lt;/p>
-  	&lt;p>&lt;b>Fantasai:&lt;/b> 
-  	  SUBMIT BEFORE ZOD.&lt;/p>
-  	...
-  &lt;/article>
-  &lt;form>
-  	&lt;input name='message'>
-  	&lt;button type='submit'>Send&lt;/button>
-  &lt;/form>
- &lt;/body>
- &lt;style>
- body { display:flexbox; flex-flow: column; }
- #messages { flex:1; }
- &lt;/style></pre>
-
-		<p class='issue'>Illustrate this example.</p>
-	</div> 
+&lt;style>
+	div { display:flexbox; outline:1px solid silver; }
+	p { flex:1 auto; margin:1em; background:gold; }
+&lt;/style&gt;
+&lt;div&gt;
+	&lt;p&gt;&quot;flexing&quot;&lt;/p&gt;
+	&lt;p&gt;allows the items to get bigger&lt;/p&gt;
+	&lt;p&gt;or&lt;/p&gt;
+	&lt;p&gt;smaller&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<img src="images/wp7zxxyu.gif" alt="items with equal flexibility extend by equal amount">
+
+</div> 
 
 <h2 id='alignment'>
 Alignment</h2>