- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 19 Jan 2012 00:12:02 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv1382
Modified Files:
Overview.html Overview.src.html
Log Message:
Add example to flex-order about column-reordering in page layout.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.95
retrieving revision 1.96
diff -u -d -r1.95 -r1.96
--- Overview.html 18 Jan 2012 18:51:55 -0000 1.95
+++ Overview.html 19 Jan 2012 00:12:00 -0000 1.96
@@ -20,11 +20,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 18 January 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 19 January 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120118/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120118/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120119/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120119/</a>-->
<dd><a
@@ -919,7 +919,62 @@
supports the Flexbox spec).</p>
</div>
- <p class=issue>Add an example of reordering columns in a page.
+ <div class=example>
+ <p>Many web pages have a similar shape in the markup, with a header on
+ top, a footer on bottom, and then a content area and one or two
+ additional columns in the middle. Generally, it's desirable that the
+ content come first in the page's source code, before the additional
+ columns. However, this makes many common designs, such as simply having
+ the additional columns on the left and the content area on the right,
+ difficult to achieve. This has been addressed in many ways over the
+ years, often going by the name "Holy Grail Layout" when there are two
+ additional columns. ‘<a href="#flex-order0"><code
+ class=property>flex-order</code></a>’ makes this trivial. For
+ example, take the following sketch of a page's code and desired layout:</p>
+
+ <div style="display:table; border-spacing: 1em; margin:1em auto;">
+ <div style="display:table-cell; vertical-align:middle;">
+ <pre>
+<!DOCTYPE html>
+<header>...</header>
+<div id='main'>
+ <article>...</article>
+ <nav>...</nav>
+ <aside>...</aside>
+</div>
+<footer>...</footer></pre>
+ </div>
+
+ <div style="display:table-cell; vertical-align:middle;"> <img height=360
+ src="images/flex-order-page.svg" styl width=400></div>
+ </div>
+
+ <p>This layout can be easily achieved with Flexbox:</p>
+
+ <pre>
+#main { display: flexbox; }
+#main > article { width: flex(1); flex-order: 2; }
+#main > nav { width: 200px; flex-order: 1; }
+#main > aside { width: 200px; flex-order: 3; }</pre>
+
+ <p>As an added bonus, the columns will all be equal-height by default, and
+ the main content will be as wide as necessary to fill the screen.
+ Additionally, this can then be combined with media queries to switch to
+ an all-vertical layout on narrow screens:</p>
+
+ <pre>
+@media all and (max-width: 600px) {
+ /* Too narrow to support three columns */
+ #main { flex-flow: column; }
+ #main > article, #main > nav, #main > aside {
+ /* Return them to document order */
+ flex-order: 0; width: auto;
+ }
+}</pre>
+
+ <p><small>(Further use of multiline flexboxes to achieve even more
+ intelligent wrapping left as an exercise for the reader.)</small></p>
+ </div>
<h2 id=flexibility><span class=secno>4. </span> Flexibility</h2>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.95
retrieving revision 1.96
diff -u -d -r1.95 -r1.96
--- Overview.src.html 18 Jan 2012 18:51:56 -0000 1.95
+++ Overview.src.html 19 Jan 2012 00:12:00 -0000 1.96
@@ -406,7 +406,48 @@
<p>You can also see a <a href="flex-order-example.html">working example</a> in some modern browsers (modern WebKit, Firefox, or any browser that supports the Flexbox spec).</p>
</div>
- <p class='issue'>Add an example of reordering columns in a page.</p>
+ <div class='example'>
+ <p>Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it's desirable that the content come first in the page's source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. 'flex-order' makes this trivial. For example, take the following sketch of a page's code and desired layout:</p>
+
+ <div style="display:table; border-spacing: 1em; margin:1em auto;">
+ <div style="display:table-cell; vertical-align:middle;">
+ <pre>
+<!DOCTYPE html>
+<header>...</header>
+<div id='main'>
+ <article>...</article>
+ <nav>...</nav>
+ <aside>...</aside>
+</div>
+<footer>...</footer></pre>
+ </div>
+ <div style="display:table-cell; vertical-align:middle;">
+ <img src="images/flex-order-page.svg" width=400 height=360 styl>
+ </div>
+ </div>
+
+ <p>This layout can be easily achieved with Flexbox:</p>
+
+ <pre>
+#main { display: flexbox; }
+#main > article { width: flex(1); flex-order: 2; }
+#main > nav { width: 200px; flex-order: 1; }
+#main > aside { width: 200px; flex-order: 3; }</pre>
+
+ <p>As an added bonus, the columns will all be equal-height by default, and the main content will be as wide as necessary to fill the screen. Additionally, this can then be combined with media queries to switch to an all-vertical layout on narrow screens:</p>
+
+ <pre>
+@media all and (max-width: 600px) {
+ /* Too narrow to support three columns */
+ #main { flex-flow: column; }
+ #main > article, #main > nav, #main > aside {
+ /* Return them to document order */
+ flex-order: 0; width: auto;
+ }
+}</pre>
+
+ <p><small>(Further use of multiline flexboxes to achieve even more intelligent wrapping left as an exercise for the reader.)</small></p>
+ </div>
<h2 id='flexibility'>
Received on Thursday, 19 January 2012 00:12:04 UTC