Skip to content

Commit 5d2fd42

Browse files
fantasaifantasai
committed
Reorganize introduction
1 parent 83483c1 commit 5d2fd42

2 files changed

Lines changed: 136 additions & 39 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 78 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
ol.continue > li { position: relative; counter-increment: list; }
3232
ol[start="0"] > li::before,
3333
ol.continue > li::before { content: counter(list) "."; position: absolute; left: -4.5em; width: 4em; text-align: right; }
34+
.compact, .compact li {
35+
margin-top: 0;
36+
margin-bottom: 0;
37+
}
3438
</style>
3539

3640
<body>
@@ -196,12 +200,15 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
196200
<!--begin-toc-->
197201

198202
<ul class=toc>
199-
<li><a href="#intro"><span class=secno>1. </span> Introduction</a>
203+
<li><a href="#intro"><span class=secno>1. </span> Introduction and
204+
Overview</a>
200205
<ul class=toc>
201-
<li><a href="#placement"><span class=secno>1.1. </span> Module
206+
<li><a href="#overview"><span class=secno>1.1. </span> Overview</a>
207+
208+
<li><a href="#placement"><span class=secno>1.2. </span> Module
202209
interactions</a>
203210

204-
<li><a href="#values"><span class=secno>1.2. </span> Values</a>
211+
<li><a href="#values"><span class=secno>1.3. </span> Values</a>
205212
</ul>
206213

207214
<li><a href="#box-model"><span class=secno>2. </span> Flex Layout Box
@@ -357,42 +364,70 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
357364
</ul>
358365
<!--end-toc-->
359366

360-
<h2 id=intro><span class=secno>1. </span> Introduction</h2>
367+
<h2 id=intro><span class=secno>1. </span> Introduction and Overview</h2>
361368

362369
<p><em>This section is not normative.</em>
363370

364-
<p>CSS 2.1 defined four layout modes — algorithms which determine the
371+
<p> CSS 2.1 defined four layout modes — algorithms which determine the
365372
size and position of boxes based on their relationships with their sibling
366-
and ancestor boxes: block layout, designed for laying out documents;
367-
inline layout, designed for laying out text; table layout, designed for
368-
laying out information in a tabular format; and positioned layout,
369-
designed for very explicit positioning without much regard for other
370-
elements in the document. This module introduces a new layout mode, flex
371-
layout, which is designed for laying out more complex applications and
372-
webpages.
373-
374-
<p>Flex layout is superficially similar to block layout. It lacks many of
375-
the more complex text or document-formatting properties that can be used
376-
in block layout, such as ‘<code class=property>float</code>’ and ‘<a
377-
href="#flex-flow-column"><code class=property>columns</code></a>’, but
378-
in return it gains more simple and powerful tools for aligning its
379-
contents in ways that webapps and complex web pages often need.
380-
381-
<p>The contents of a flex container can be laid out in any direction (left,
382-
right, down, or even up!), can have their order swapped around dynamically
383-
(i.e., display order is independent of source order), and can "flex" their
384-
sizes and positions to respond to the available space. If a flex container
385-
is <a href="#multi-line"><i>multi-line</i></a>, the flex items flow in two
386-
dimensions, wrapping into separate lines in a fashion similar to how text
387-
is wrapped into multiple lines.
373+
and ancestor boxes:
374+
375+
<ul class=compact>
376+
<li>block layout, designed for laying out documents
377+
378+
<li>inline layout, designed for laying out text
379+
380+
<li>table layout, designed for laying out 2D data in a tabular format
381+
382+
<li>positioned layout, designed for very explicit positioning without much
383+
regard for other elements in the document
384+
</ul>
385+
386+
<p> This module introduces a new layout mode, <dfn id=flex-layout>flex
387+
layout</dfn>, which is designed for laying out more complex applications
388+
and webpages.
389+
390+
<h3 id=overview><span class=secno>1.1. </span> Overview</h3>
391+
392+
<p><em>This section is not normative.</em>
393+
394+
<p> Flex layout is superficially similar to block layout. It lacks many of
395+
the more complex text- or document-centric properties that can be used in
396+
block layout, such as <a
397+
href="http://www.w3.org/TR/CSS21/visuren.html#floats">floats</a> and <a
398+
href="http://www.w3.org/TR/css3-multicol/">columns</a>. In return it gains
399+
simple and powerful tools for distributing space and aligning content in
400+
ways that webapps and complex web pages often need. The contents of a flex
401+
container:
402+
403+
<ul>
404+
<li> can be laid out in any <a href="#flex-direction-property">flow
405+
direction</a> (leftwards, rightwards, downwards, or even upwards!)
406+
407+
<li> can have their order <a href="#flex-flow-row-reverse">reversed</a> or
408+
<a href="#order-property">rearranged</a> at the style layer (i.e.,
409+
display order can be independent of source order)
410+
411+
<li> can be laid out linearly along a single (<a href="#main-axis"><i
412+
title="main axis">main</i></a>) axis or <a
413+
href="#flex-wrap-property">wrapped</a> into multiple lines along a
414+
secondary (<a href="#cross-axis"><i title="cross axis">cross</i></a>)
415+
axis
416+
417+
<li> can <a href="#flexibility">“flex” their sizes</a> to respond to
418+
the available space
419+
420+
<li> can be <a href="#alignment">aligned</a> with respect to their
421+
container or each other
422+
423+
<li> can be dynamically <a href="#visibility-collapse">collapsed</a> or
424+
uncollapsed along the <a href="#main-axis"><i>main axis</i></a> while
425+
preserving the container's <a href="#cross-size"><i>cross size</i></a>
426+
</ul>
388427

389428
<div class=example>
390429
<p>For example, the following HTML snippet uses a flex container to create
391-
a toolbar with icons. The flex container is horizontal, and the
392-
children's widths don't fill the flex container's width, so the
393-
additional space is distributed around and between the children. As the
394-
flex container grows (perhaps because the user is viewing the page on a
395-
wider screen), the children spread out evenly and automatically:
430+
a toolbar with icons.
396431

397432
<pre>
398433
&lt;ul>
@@ -406,22 +441,28 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
406441
/* Irrelevant styling for this example removed. */
407442
&lt;/style></pre>
408443

444+
<p>The flex container is horizontal, and the children's widths don't fill
445+
the flex container's width, so the additional space is distributed around
446+
and between the children. As the flex container grows (perhaps because
447+
the user is viewing the page on a wider screen), the children spread out
448+
evenly and automatically:
449+
409450
<div class=figure> <img alt height=140 src="images/toolbar-example.svg"
410451
width=400>
411452
<p class=caption>Example rendering of the above code snippet, at two
412453
different flex container widths.
413454
</div>
414455
</div>
415456

416-
<h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
457+
<h3 id=placement><span class=secno>1.2. </span> Module interactions</h3>
417458

418459
<p> This module extends the definition of the ‘<code
419460
class=property>display</code>’ property <a href="#CSS21"
420461
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, adding a new block-level and
421462
new inline-level display type and defining a new type of formatting
422463
context.
423464

424-
<h3 id=values><span class=secno>1.2. </span> Values</h3>
465+
<h3 id=values><span class=secno>1.3. </span> Values</h3>
425466

426467
<p>This specification follows the <a
427468
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
@@ -3752,6 +3793,9 @@ <h2 class=no-num id=index>Index</h2>
37523793
<li>flex item's, <a href="#flex-item"
37533794
title="flex item's"><strong>4.</strong></a>
37543795

3796+
<li>flex layout, <a href="#flex-layout"
3797+
title="flex layout"><strong>1.</strong></a>
3798+
37553799
<li>flex-shrink, <a href="#flex-shrink"
37563800
title=flex-shrink><strong>7.3.2.</strong></a>
37573801

‎css3-flexbox/Overview.src.html‎

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
ol.continue > li { position: relative; counter-increment: list; }
2828
ol[start="0"] > li::before,
2929
ol.continue > li::before { content: counter(list) "."; position: absolute; left: -4.5em; width: 4em; text-align: right; }
30+
.compact, .compact li {
31+
margin-top: 0;
32+
margin-bottom: 0;
33+
}
3034
</style>
3135
</head><body>
3236

@@ -103,18 +107,61 @@ <h2 class="no-num no-toc" id="table">Table of contents</h2>
103107

104108

105109
<h2 id="intro">
106-
Introduction</h2>
110+
Introduction and Overview</h2>
107111

108112
<p><em>This section is not normative.</em>
109113

110-
<p>CSS 2.1 defined four layout modes &mdash; algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents; inline layout, designed for laying out text; table layout, designed for laying out information in a tabular format; and positioned layout, designed for very explicit positioning without much regard for other elements in the document. This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.
114+
<p>
115+
CSS 2.1 defined four layout modes &mdash; algorithms which determine
116+
the size and position of boxes based on their relationships
117+
with their sibling and ancestor boxes:
118+
<ul class="compact">
119+
<li>block layout, designed for laying out documents
120+
<li>inline layout, designed for laying out text
121+
<li>table layout, designed for laying out 2D data in a tabular format
122+
<li>positioned layout, designed for very explicit positioning without much regard for other elements in the document
123+
</ul>
124+
<p>
125+
This module introduces a new layout mode, <dfn>flex layout</dfn>,
126+
which is designed for laying out more complex applications and webpages.
111127

112-
<p>Flex layout is superficially similar to block layout. It lacks many of the more complex text or document-formatting properties that can be used in block layout, such as 'float' and 'columns', but in return it gains more simple and powerful tools for aligning its contents in ways that webapps and complex web pages often need.
128+
<h3 id=overview>
129+
Overview</h3>
130+
<p><em>This section is not normative.</em>
113131

114-
<p>The contents of a flex container can be laid out in any direction (left, right, down, or even up!), can have their order swapped around dynamically (i.e., display order is independent of source order), and can "flex" their sizes and positions to respond to the available space. If a flex container is <i>multi-line</i>, the flex items flow in two dimensions, wrapping into separate lines in a fashion similar to how text is wrapped into multiple lines.
132+
<p>
133+
Flex layout is superficially similar to block layout.
134+
It lacks many of the more complex text- or document-centric properties
135+
that can be used in block layout, such as
136+
<a href="http://www.w3.org/TR/CSS21/visuren.html#floats">floats</a> and
137+
<a href="http://www.w3.org/TR/css3-multicol/">columns</a>.
138+
In return it gains simple and powerful tools
139+
for distributing space and aligning content
140+
in ways that webapps and complex web pages often need.
141+
The contents of a flex container:
142+
<ul>
143+
<li>
144+
can be laid out in any <a href="#flex-direction-property">flow direction</a>
145+
(leftwards, rightwards, downwards, or even upwards!)
146+
<li>
147+
can have their order <a href="#flex-flow-row-reverse">reversed</a> or
148+
<a href="#order-property">rearranged</a> at the style layer
149+
(i.e., display order can be independent of source order)
150+
<li>
151+
can be laid out linearly along a single (<i title="main axis">main</i>) axis or
152+
<a href="#flex-wrap-property">wrapped</a> into multiple lines along a secondary (<i title="cross axis">cross</i>) axis
153+
<li>
154+
can <a href="#flexibility">&ldquo;flex&rdquo; their sizes</a>
155+
to respond to the available space
156+
<li>
157+
can be <a href="#alignment">aligned</a> with respect to their container or each other
158+
<li>
159+
can be dynamically <a href="#visibility-collapse">collapsed</a> or uncollapsed
160+
along the <i>main axis</i> while preserving the container's <i>cross size</i>
161+
</ul>
115162

116163
<div class="example">
117-
<p>For example, the following HTML snippet uses a flex container to create a toolbar with icons. The flex container is horizontal, and the children's widths don't fill the flex container's width, so the additional space is distributed around and between the children. As the flex container grows (perhaps because the user is viewing the page on a wider screen), the children spread out evenly and automatically:
164+
<p>For example, the following HTML snippet uses a flex container to create a toolbar with icons.
118165

119166
<pre>
120167
&lt;ul>
@@ -128,6 +175,12 @@ <h2 id="intro">
128175
/* Irrelevant styling for this example removed. */
129176
&lt;/style></pre>
130177

178+
<p>The flex container is horizontal,
179+
and the children's widths don't fill the flex container's width,
180+
so the additional space is distributed around and between the children.
181+
As the flex container grows (perhaps because the user is viewing the page on a wider screen),
182+
the children spread out evenly and automatically:
183+
131184
<div class='figure'>
132185
<img src="images/toolbar-example.svg" width=400 height=140 alt>
133186
<p class='caption'>Example rendering of the above code snippet, at two different flex container widths.

0 commit comments

Comments
 (0)