[css-flexbox-3] Move flexbox example back to flexbox. #5865

fantasai · fantasai · commit 16d14928ca0f · 2021-08-12T16:08:32.000-07:00
diff --git a/css-display-3/Overview.bs b/css-display-3/Overview.bs
@@ -1031,67 +1031,6 @@ Reordering and Accessibility</h3>
 	(Since visual perception is two-dimensional and non-linear,
 	the desired visual order is not always logical.)
 
-	<div class='example'>
-		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.
-		'order' makes this trivial.
-		For example, take the following sketch of a page's code and desired layout:
-
-		<div class='code-and-figure'>
-			<div>
-				<pre class="lang-markup">
-					&lt;!DOCTYPE html>
-					&lt;header>...&lt;/header>
-					&lt;main>
-					   &lt;article>...&lt;/article>
-					   &lt;nav>...&lt;/nav>
-					   &lt;aside>...&lt;/aside>
-					&lt;/main>
-					&lt;footer>...&lt;/footer>
-				</pre>
-			</div>
-			<div><img src="images/flex-order-page.svg" width=400 height=360 alt="In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left."></div>
-		</div>
-
-		This layout can be easily achieved with flex layout:
-
-		<pre class="lang-css">
-			main { display: flex; }
-			main > article { order: 2; min-width: 12em; flex:1; }
-			main > nav     { order: 1; width: 200px; }
-			main > aside   { order: 3; width: 200px; }
-		</pre>
-
-		As an added bonus,
-		the columns will all be <a value for=align-self lt=stretch>equal-height</a> 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:
-
-		<pre class="lang-css">
-			@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 */
-					order: 0; width: auto;
-				}
-			}
-		</pre>
-
-		<small>(Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)</small>
-	</div>
-
 	In order to preserve the author's intended ordering in all presentation modes,
 	authoring tools--
 	including WYSIWYG editors as well as Web-based authoring aids--
