Skip to content

Commit c21a9c1

Browse files
bert-githubbert-github
committed
Generated. Do not edit!
1 parent 1629680 commit c21a9c1

1 file changed

Lines changed: 134 additions & 98 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 134 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@
33
<html>
44
<head>
55
<title>Flexible Box Layout Module</title>
6-
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
7-
type="text/css">
8-
<!-- TODO: remove before build -->
9-
<link href="http://dev.w3.org/csswg/default.css" rel=stylesheet>
10-
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
11-
type="text/css">
126
<link href="../default.css" rel=stylesheet type="text/css">
137

148
<style type="text/css">
159
p { margin: .5em 0; }
1610
dd > p { text-indent: 0; }
1711
a > b { font-weight: normal; color: #800; }
1812
</style>
13+
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
14+
type="text/css">
15+
<!-- TODO: change before build -->
1916

2017
<body>
21-
<div class=head>
18+
<div class=head> <!--begin-logo-->
19+
<p><a href="http://www.w3.org/"><img alt=W3C height=48
20+
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
21+
2222
<h1 id=head-box-flexible>Flexible Box Layout Module</h1>
2323

24-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 21 March 2011</h2>
24+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 22 March 2011</h2>
2525

2626
<dl>
2727
<dt>This version:
2828

29-
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110321/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110321/</a></dd> -->
29+
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a></dd> -->
3030
<a
3131
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
3232

@@ -37,6 +37,12 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 21 March 2011</h2>
3737
href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
3838

3939

40+
<dt>Previous version:
41+
42+
<dd><a
43+
href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a>
44+
45+
4046
<dt>Editors:
4147

4248
<dd>Tab Atkins Jr. <a
@@ -76,96 +82,127 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 21 March 2011</h2>
7682
and <a
7783
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
7884
use</a> rules apply.</p>
79-
<!--end-copyright--></div>
80-
81-
<hr>
82-
83-
<div>
84-
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
85-
86-
<p>The draft describes a CSS box model optimized for interface design. It
87-
provides an additional layout system alongside the ones already in CSS.
88-
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> In this new
89-
box model, the children of a box are laid out either horizontally or
90-
vertically, and unused space can be assigned to a particular child or
91-
distributed among the children by assignment of "flex" to the children
92-
that should expand. Nesting of these boxes (horizontal inside vertical,
93-
or vertical inside horizontal) can be used to build layouts in two
94-
dimensions. This model is based on the box model in the XUL
95-
user-interface language used for the user interface of many Mozilla-based
96-
applications (such as Firefox).</p>
85+
<!--end-copyright-->
86+
<hr title="Separator for header">
9787
</div>
9888

99-
<div>
100-
<h2 class="no-num no-toc" id=table>Table of contents</h2>
101-
<!--begin-toc-->
102-
<ul class=toc>
103-
<li><a href="#overview"><span class=secno>1. </span> Overview</a>
104-
105-
<li><a href="#display-flexbox"><span class=secno>2. </span> New values
106-
for &lsquo;<code class=property>display</code>&rsquo; property</a>
107-
108-
<li><a href="#flex-direction"><span class=secno>3. </span> Flexbox
109-
Direction: the &lsquo;<code class=property>flex-direction</code>&rsquo;
110-
property</a>
111-
112-
<li><a href="#flex-order"><span class=secno>4. </span> Display Order: the
113-
&lsquo;<code class=property>flex-order</code>&rsquo; property</a>
114-
115-
<li><a href="#flexibility"><span class=secno>5. </span> Flexibility</a>
116-
<ul class=toc>
117-
<li><a href="#resolving-flexible-lengths"><span class=secno>5.1.
118-
</span> Resolving Flexible Lengths</a>
119-
120-
<li><a href="#flex-function"><span class=secno>5.2. </span> The
121-
&lsquo;<code class=css>flex()</code>&rsquo; function</a>
122-
</ul>
89+
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
90+
91+
<p>The draft describes a CSS box model optimized for interface design. It
92+
provides an additional layout system alongside the ones already in CSS. <a
93+
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> In this new box
94+
model, the children of a box are laid out either horizontally or
95+
vertically, and unused space can be assigned to a particular child or
96+
distributed among the children by assignment of "flex" to the children
97+
that should expand. Nesting of these boxes (horizontal inside vertical, or
98+
vertical inside horizontal) can be used to build layouts in two
99+
dimensions. This model is based on the box model in the XUL user-interface
100+
language used for the user interface of many Mozilla-based applications
101+
(such as Firefox).
102+
103+
<h2 class="no-num no-toc" id=status>Status of this document</h2>
104+
<!--begin-status-->
105+
106+
<p>This is a public copy of the editors' draft. It is provided for
107+
discussion only and may change at any moment. Its publication here does
108+
not imply endorsement of its contents by W3C. Don't cite this document
109+
other than as work in progress.
110+
111+
<p>The (<a
112+
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
113+
mailing list <a
114+
href="mailto:www-style@w3.org?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE">
115+
www-style@w3.org</a> (see <a
116+
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
117+
discussion of this specification. When sending e-mail, please put the text
118+
&#8220;css3-flexbox&#8221; in the subject, preferably like this:
119+
&#8220;[<!---->css3-flexbox<!---->] <em>&hellip;summary of
120+
comment&hellip;</em>&#8221;
121+
122+
<p>This document was produced by the <a href="/Style/CSS/members">CSS
123+
Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
124+
125+
<p>This document was produced by a group operating under the <a
126+
href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
127+
Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
128+
rel=disclosure>public list of any patent disclosures</a> made in
129+
connection with the deliverables of the group; that page also includes
130+
instructions for disclosing a patent. An individual who has actual
131+
knowledge of a patent which the individual believes contains <a
132+
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
133+
Claim(s)</a> must disclose the information in accordance with <a
134+
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
135+
W3C Patent Policy</a>.</p>
136+
<!--end-status-->
137+
138+
<h2 class="no-num no-toc" id=table>Table of contents</h2>
139+
<!--begin-toc-->
140+
141+
<ul class=toc>
142+
<li><a href="#overview"><span class=secno>1. </span> Overview</a>
143+
144+
<li><a href="#display-flexbox"><span class=secno>2. </span> New values for
145+
&lsquo;<code class=property>display</code>&rsquo; property</a>
146+
147+
<li><a href="#flex-direction"><span class=secno>3. </span> Flexbox
148+
Direction: the &lsquo;<code class=property>flex-direction</code>&rsquo;
149+
property</a>
150+
151+
<li><a href="#flex-order"><span class=secno>4. </span> Display Order: the
152+
&lsquo;<code class=property>flex-order</code>&rsquo; property</a>
153+
154+
<li><a href="#flexibility"><span class=secno>5. </span> Flexibility</a>
155+
<ul class=toc>
156+
<li><a href="#resolving-flexible-lengths"><span class=secno>5.1. </span>
157+
Resolving Flexible Lengths</a>
158+
159+
<li><a href="#flex-function"><span class=secno>5.2. </span> The
160+
&lsquo;<code class=css>flex()</code>&rsquo; function</a>
161+
</ul>
162+
163+
<li><a href="#flex-pack"><span class=secno>6. </span> The &lsquo;<code
164+
class=property>flex-pack</code>&rsquo; property</a>
165+
166+
<li><a href="#flex-align"><span class=secno>7. </span> The &lsquo;<code
167+
class=property>flex-align</code>&rsquo; property</a>
168+
169+
<li><a href="#free-space-algorithm"><span class=secno>8. </span> Free
170+
Space Calculation and Distribution</a>
171+
<ul class=toc>
172+
<li><a href="#initial-computation"><span class=secno>8.1. </span>
173+
Initial Computation</a>
174+
175+
<li><a href="#first-distribution-round"><span class=secno>8.2. </span>
176+
First Distribution Round</a>
177+
178+
<li><a href="#second-distribution-round"><span class=secno>8.3. </span>
179+
Second Distribution Round</a>
180+
181+
<li><a href="#intermediate-computation"><span class=secno>8.4. </span>
182+
Intermediate Computation</a>
183+
184+
<li><a href="#third-distribution-round"><span class=secno>8.5. </span>
185+
Third Distribution Round</a>
186+
187+
<li><a href="#free-space-allocation-algorithm"><span class=secno>8.6.
188+
</span> Free Space Allocation Algorithm</a>
189+
</ul>
190+
191+
<li><a href="#layout-interface"><span class=secno>9. </span> Interface
192+
With Other Layout Algorithms</a>
193+
194+
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
195+
196+
<li class=no-num><a href="#references">References</a>
197+
<ul class=toc>
198+
<li class=no-num><a href="#normative">Normative references</a>
199+
</ul>
200+
201+
<li class=no-num><a href="#index">Index</a>
123202

124-
<li><a href="#flex-pack"><span class=secno>6. </span> The &lsquo;<code
125-
class=property>flex-pack</code>&rsquo; property</a>
126-
127-
<li><a href="#flex-align"><span class=secno>7. </span> The &lsquo;<code
128-
class=property>flex-align</code>&rsquo; property</a>
129-
130-
<li><a href="#free-space-algorithm"><span class=secno>8. </span> Free
131-
Space Calculation and Distribution</a>
132-
<ul class=toc>
133-
<li><a href="#initial-computation"><span class=secno>8.1. </span>
134-
Initial Computation</a>
135-
136-
<li><a href="#first-distribution-round"><span class=secno>8.2. </span>
137-
First Distribution Round</a>
138-
139-
<li><a href="#second-distribution-round"><span class=secno>8.3. </span>
140-
Second Distribution Round</a>
141-
142-
<li><a href="#intermediate-computation"><span class=secno>8.4. </span>
143-
Intermediate Computation</a>
144-
145-
<li><a href="#third-distribution-round"><span class=secno>8.5. </span>
146-
Third Distribution Round</a>
147-
148-
<li><a href="#free-space-allocation-algorithm"><span class=secno>8.6.
149-
</span> Free Space Allocation Algorithm</a>
150-
</ul>
151-
152-
<li><a href="#layout-interface"><span class=secno>9. </span> Interface
153-
With Other Layout Algorithms</a>
154-
155-
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
156-
157-
<li class=no-num><a href="#references">References</a>
158-
<ul class=toc>
159-
<li class=no-num><a href="#normative">Normative references</a>
160-
</ul>
161-
162-
<li class=no-num><a href="#index">Index</a>
163-
164-
<li class=no-num><a href="#property">Property index</a>
165-
</ul>
166-
<!--end-toc--></div>
167-
168-
<hr>
203+
<li class=no-num><a href="#property">Property index</a>
204+
</ul>
205+
<!--end-toc-->
169206
<!-- ====================================================================== -->
170207

171208
<h2 id=overview><span class=secno>1. </span> Overview</h2>
@@ -1277,8 +1314,7 @@ <h2 id=layout-interface><span class=secno>9. </span> Interface With Other
12771314

12781315
<hr title="Separator from footer">
12791316

1280-
<h2 class=no-num id=acknowledgments><a
1281-
name=acknowledgments>Acknowledgments</a></h2>
1317+
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
12821318

12831319
<p>[This section will contain further acknowledgments.]
12841320

0 commit comments

Comments
 (0)