Skip to content

Commit bce38df

Browse files
dbarondbaron
committed
Add makefile, mostly copied from css3-background. Fix </h2> that should have been </h3>. Change class=example elements to all be divs to fit with default stylesheet. Switch from custom style sheet to defaults.
1 parent 003324a commit bce38df

4 files changed

Lines changed: 201 additions & 208 deletions

File tree

‎css3-flexbox/Makefile‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Calling the post-processor with file-upload. Assumes the username
2+
# and password are in ~/.curl-w3.org
3+
#
4+
# Possible other options:
5+
# -F date=YYYY-MM-DD
6+
# -F ids=on
7+
8+
%.html: %.src.html
9+
@echo "Calling post-processor to generate $@..."
10+
@curl --basic -F file=@$< -F group=CSS -F output=html -F method=file -s \
11+
-K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
12+
%.err: %.src.html
13+
@echo "Calling post-processor to check $<..."
14+
@curl --basic -F file=@$< -F group=CSS -F output=err -F method=file -s \
15+
-K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
16+
17+
18+
19+
all: check Overview.html
20+
@echo Done.
21+
22+
check: Overview.err
23+
@cat $<
24+
@grep -q '^No errors$$' $< # Force a non-zero exit code if errors
25+
26+
27+
28+
# A handy shortcut:
29+
30+
commit: update clean all
31+
cvs commit -m 'Generated. Do not edit!' Overview.html
32+
33+
update:
34+
cvs update
35+
36+
clean:
37+
rm Overview.html
38+
39+
40+
41+
.PHONY: check commit update clean

‎css3-flexbox/Overview.html‎

Lines changed: 115 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
<html>
44
<head>
55
<title>Flexible Box Layout Module</title>
6-
<link href=flexbox.css rel=stylesheet type="text/css">
6+
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
7+
type="text/css">
8+
<link href="../default.css" rel=stylesheet type="text/css">
79

810
<body>
911
<div class=head>
@@ -69,7 +71,7 @@ <h2 class="no-num no-toc" id=table><a name=contents>Table of contents</a></h2>
6971
<li><a href="#multiple"><span class=secno>7 </span>Multiple Lines</a>
7072
<ul class=toc>
7173
<li><a href="#multiple"><span class=secno>7.1 </span>Multiple Lines and
72-
alignment </a>
74+
alignment</a>
7375
</ul>
7476

7577
<li><a href="#inlinesAndBlocks"><span class=secno>8 </span>Relationship to
@@ -172,24 +174,26 @@ <h2 id=overview><span class=secno>1 </span>Overview</h2>
172174
properties do apply to the box itself if it is not a child of another box.
173175

174176

175-
<p> For example:
177+
<div class=example>
178+
<p> For example:</p>
176179

177-
<pre class=example>
180+
<pre>
178181
&lt;p style="width: 400px;"&gt;
179182
&lt;button style="width: 200px;"&gt;Child 1&lt;/button&gt;
180183
&lt;button style="width: 100px;"&gt;Child 2&lt;/button&gt;
181184
&lt;/p&gt;
182185
</pre>
183186

184-
<p class=example> In this example, the first button is 200 pixels wide and
185-
the second button is 100 pixels wide. As the box is 400 pixels wide, there
186-
is extra space left over which is placed after the two buttons but inside
187-
the box. The placement of this extra space may be modified using the
188-
various box properties described in the next sections. Neither the height
189-
of the buttons nor the height of the box are specified, so the height is
190-
computed intrinsically from the content. In this case, the buttons will be
191-
the height needed to display the label and button border, and the box will
192-
also be this height plus any margins around the buttons.
187+
<p> In this example, the first button is 200 pixels wide and the second
188+
button is 100 pixels wide. As the box is 400 pixels wide, there is extra
189+
space left over which is placed after the two buttons but inside the box.
190+
The placement of this extra space may be modified using the various box
191+
properties described in the next sections. Neither the height of the
192+
buttons nor the height of the box are specified, so the height is
193+
computed intrinsically from the content. In this case, the buttons will
194+
be the height needed to display the label and button border, and the box
195+
will also be this height plus any margins around the buttons.</p>
196+
</div>
193197

194198
<p> Elements within a box may use the <span class=property>&lsquo;<code
195199
class=property>overflow</code>&rsquo;</span> property to control whether a
@@ -441,9 +445,10 @@ <h2 id=displayorder><span class=secno>3 </span>Display order</h2>
441445
ordinal groups are examined in the same order, except the elements appear
442446
reversed.
443447

444-
<p class=example> This example shows how ordinal groups might be used.
448+
<div class=example>
449+
<p> This example shows how ordinal groups might be used.</p>
445450

446-
<pre class=example>
451+
<pre>
447452
#div1 { display: box; }
448453
#span1 { box-ordinal-group: 2; }
449454
#span3 { box-ordinal-group: 2; }
@@ -457,15 +462,16 @@ <h2 id=displayorder><span class=secno>3 </span>Display order</h2>
457462
&lt;/div&gt;
458463
</pre>
459464

460-
<p class=example> The first ordinal group, 1, contains span2 and span4. As
461-
span2 does not specify an ordinal group, it will default to 1. The
462-
elements will be displayed in document order, so span2 will be displayed
463-
before span4. The second ordinal group, 2, contains the remaining two
464-
spans. The resulting display order will be:
465+
<p> The first ordinal group, 1, contains span2 and span4. As span2 does
466+
not specify an ordinal group, it will default to 1. The elements will be
467+
displayed in document order, so span2 will be displayed before span4. The
468+
second ordinal group, 2, contains the remaining two spans. The resulting
469+
display order will be:</p>
465470

466-
<pre class=example>
471+
<pre>
467472
span2 span4 span1 span3
468473
</pre>
474+
</div>
469475

470476
<p>Elements within a box can use the <span class=property>&lsquo;<code
471477
class=property>visibility</code>&rsquo;</span> property to render
@@ -881,10 +887,11 @@ <h2 id=flex><span class=secno>5 </span>Flexibility</h2>
881887
width is set to that maximum width, and any remaining extra width beyond
882888
that is divided up among the other children.
883889

884-
<p class=example> In this example there is 60 pixels of extra space
885-
available in the containing box.
890+
<div class=example>
891+
<p> In this example there is 60 pixels of extra space available in the
892+
containing box.</p>
886893

887-
<pre class=example>
894+
<pre>
888895
#div1 { display: box; width: 300px; }
889896
#button1 { box-flex: 1.0; width: 100px; }
890897
#button2 { box-flex: 2.0; width: 140px; }
@@ -895,18 +902,19 @@ <h2 id=flex><span class=secno>5 </span>Flexibility</h2>
895902
&lt;/div&gt;
896903
</pre>
897904

898-
<p class=example> As both child buttons are flexible, the extra space will
899-
be divided up between them. The first child button has a flexibility of
900-
1.0 and the second child button has a flexibility of 2.0. The first button
901-
will receive 20 pixels of extra width and the second button will receive
902-
40 pixels of extra width, maintaining the same ratio of extra width to
903-
flexibility values. This extra width is added to the preferred size of the
904-
element.
905-
906-
<p class=example> However, if the second button had a maximum width of 150
907-
pixels, it could only grow by 10 pixels before hitting this maximum size,
908-
so the remaining 30 pixels would instead be given to the first element,
909-
breaking the flexibility ratio.
905+
<p> As both child buttons are flexible, the extra space will be divided up
906+
between them. The first child button has a flexibility of 1.0 and the
907+
second child button has a flexibility of 2.0. The first button will
908+
receive 20 pixels of extra width and the second button will receive 40
909+
pixels of extra width, maintaining the same ratio of extra width to
910+
flexibility values. This extra width is added to the preferred size of
911+
the element.</p>
912+
913+
<p> However, if the second button had a maximum width of 150 pixels, it
914+
could only grow by 10 pixels before hitting this maximum size, so the
915+
remaining 30 pixels would instead be given to the first element, breaking
916+
the flexibility ratio.</p>
917+
</div>
910918

911919
<p> More specifically, the percentage of extra space that an element may
912920
receive is calculated as follows:
@@ -941,9 +949,10 @@ <h2 id=flex><span class=secno>5 </span>Flexibility</h2>
941949
flexibility may cause the inline element to grow in height, as the text
942950
within it may need to wrap to additional lines.
943951

944-
<p class=example> Examples:
952+
<div class=example>
953+
<p> Examples:</p>
945954

946-
<pre class=example>
955+
<pre>
947956
#div1 { display: box; box-orient: vertical; height: 200px }
948957

949958
&lt;div id="div1"&gt;
@@ -953,33 +962,32 @@ <h2 id=flex><span class=secno>5 </span>Flexibility</h2>
953962
&lt;/div&gt;
954963
</pre>
955964

956-
<p class=example> In the example above, the box is 200 pixels tall and is
957-
more than enough room for the three buttons. Because the first and third
958-
buttons are inflexible, they remain the same size, which is their
959-
intrinsic size. The second button is specified as being flexible, and
960-
because it is the only flexible element in the box, it receives all of the
961-
extra space.
965+
<p> In the example above, the box is 200 pixels tall and is more than
966+
enough room for the three buttons. Because the first and third buttons
967+
are inflexible, they remain the same size, which is their intrinsic size.
968+
The second button is specified as being flexible, and because it is the
969+
only flexible element in the box, it receives all of the extra space.</p>
962970

963-
<pre class=example>
971+
<pre>
964972
&lt;div style="display: box; box-orient: vertical;"&gt;
965973
&lt;button style="box-flex: 1; height: 1000px;"&gt;
966974
Cat
967975
&lt;/button&gt;
968976
&lt;/div&gt;
969977
</pre>
970978

971-
<p class=example> In this example, if the height of the box is reduced, for
972-
instance, because the user resized the containing viewport, the height of
973-
the flexible button also shrinks with the box, despite the specification
974-
of 1000 pixels as the preferred height. It continues to shrink until the
975-
minimum required height for the button is reached, which here will likely
976-
be the height needed to display the button's label and border. After that,
977-
the button can shrink no further. Elements within a box can therefore have
978-
their own notions of minimum and maximum intrinsic sizes. In the above
979-
example, the button could not get any smaller than the minimum height
980-
required to draw its borders and its text.
981-
982-
<pre class=example>
979+
<p> In this example, if the height of the box is reduced, for instance,
980+
because the user resized the containing viewport, the height of the
981+
flexible button also shrinks with the box, despite the specification of
982+
1000 pixels as the preferred height. It continues to shrink until the
983+
minimum required height for the button is reached, which here will likely
984+
be the height needed to display the button's label and border. After
985+
that, the button can shrink no further. Elements within a box can
986+
therefore have their own notions of minimum and maximum intrinsic sizes.
987+
In the above example, the button could not get any smaller than the
988+
minimum height required to draw its borders and its text.</p>
989+
990+
<pre>
983991
#div1 { display: box; }
984992
#iframe1 { box-flex: 1; min-width: 100px; max-width: 300px; height: 300px; }
985993

@@ -988,27 +996,28 @@ <h2 id=flex><span class=secno>5 </span>Flexibility</h2>
988996
&lt;/div&gt;
989997
</pre>
990998

991-
<p class=example> In this example, the iframe has a minimum width of 100
992-
pixels and a maximum width of 300 pixels. If the containing box is less
993-
than 100 pixels wide, the iframe will overflow its containing div. If the
994-
containing box is between 100 pixels and 300 pixels inclusive, the width
995-
of the iframe would be set to that size, minus any necessary padding,
996-
borders and margins. If the width of the containing box is larger than 300
997-
pixels, the extra space will be added inside the div. The extra space is
998-
added after the iframe inside the box.
999+
<p> In this example, the iframe has a minimum width of 100 pixels and a
1000+
maximum width of 300 pixels. If the containing box is less than 100
1001+
pixels wide, the iframe will overflow its containing div. If the
1002+
containing box is between 100 pixels and 300 pixels inclusive, the width
1003+
of the iframe would be set to that size, minus any necessary padding,
1004+
borders and margins. If the width of the containing box is larger than
1005+
300 pixels, the extra space will be added inside the div. The extra space
1006+
is added after the iframe inside the box.</p>
9991007

1000-
<pre class=example>
1008+
<pre>
10011009
&lt;p style="display: box;"&gt;
10021010
&lt;button style="box-flex: 1; max-width: 50px;"&gt;Child 1&lt;/button&gt;
10031011
&lt;button style="box-flex: 1; min-width: 50px;"&gt;Child 2&lt;/button&gt;
10041012
&lt;/p&gt;
10051013
</pre>
10061014

1007-
<p class=example>In this example, the box has been stretched so that it is
1008-
very wide. The first child has a maximum width of 50 pixels, and it
1009-
divides the excess space equally with the second child until its maximum
1010-
width has been reached. After that, since it is not allowed to grow any
1011-
further, the remaining space all goes to the second child.
1015+
<p>In this example, the box has been stretched so that it is very wide.
1016+
The first child has a maximum width of 50 pixels, and it divides the
1017+
excess space equally with the second child until its maximum width has
1018+
been reached. After that, since it is not allowed to grow any further,
1019+
the remaining space all goes to the second child.</p>
1020+
</div>
10121021

10131022
<h2 id=packing><span class=secno>6 </span>Packing along the box axis</h2>
10141023

@@ -1095,19 +1104,21 @@ <h2 id=packing><span class=secno>6 </span>Packing along the box axis</h2>
10951104
there is only one child, treat the pack value as if it were start.
10961105
</dl>
10971106

1098-
<pre class=example>
1107+
<div class=example>
1108+
<pre>
10991109
&lt;p style="box-align: center; box-pack: center; width: 300px; height: 300px;"&gt;
11001110
&lt;button&gt;centered&lt;/button&gt;
11011111
&lt;/p&gt;
11021112
</pre>
11031113

1104-
<p> In the example above, the button is centered within the box using the
1105-
<span class=property><a href="#propdef-box-align">&lsquo;<code
1106-
class=property>box-align</code>&rsquo;</a></span> and <span
1107-
class=property><a href="#propdef-box-pack">&lsquo;<code
1108-
class=property>box-pack</code>&rsquo;</a></span> properties together. The
1109-
former centers the button vertically, and the latter centers the button
1110-
horizontally.
1114+
<p> In the example above, the button is centered within the box using the
1115+
<span class=property><a href="#propdef-box-align">&lsquo;<code
1116+
class=property>box-align</code>&rsquo;</a></span> and <span
1117+
class=property><a href="#propdef-box-pack">&lsquo;<code
1118+
class=property>box-pack</code>&rsquo;</a></span> properties together. The
1119+
former centers the button vertically, and the latter centers the button
1120+
horizontally.
1121+
</div>
11111122

11121123
<h2 id=multiple><span class=secno>7 </span>Multiple Lines</h2>
11131124

@@ -1195,10 +1206,10 @@ <h2 id=multiple><span class=secno>7 </span>Multiple Lines</h2>
11951206
flex-groups. The packing of elements in a line, as specified by the
11961207
box-pack property, is also computed independently for each line.
11971208

1198-
<p class=example> This example shows four buttons that do not fit
1199-
horizontally.
1209+
<div class=example>
1210+
<p> This example shows four buttons that do not fit horizontally.</p>
12001211

1201-
<pre class=example>
1212+
<pre>
12021213
#div1 {
12031214
display: box;
12041215
box-lines: multiple;
@@ -1217,24 +1228,24 @@ <h2 id=multiple><span class=secno>7 </span>Multiple Lines</h2>
12171228
&lt;/div&gt;
12181229
</pre>
12191230

1220-
<p class=example> The buttons are shrunk to their minimum widths, in this
1221-
case calculated intrinsically. Assume that the four buttons have a minimum
1222-
intrinsic width of 80 pixels. This will allow the first three buttons to
1223-
fit in 240 pixels with 60 pixels left over of remaining space. Because the
1224-
box-lines property has a specified value of multiple, the fourth button
1225-
may be moved onto a second line.
1231+
<p> The buttons are shrunk to their minimum widths, in this case
1232+
calculated intrinsically. Assume that the four buttons have a minimum
1233+
intrinsic width of 80 pixels. This will allow the first three buttons to
1234+
fit in 240 pixels with 60 pixels left over of remaining space. Because
1235+
the box-lines property has a specified value of multiple, the fourth
1236+
button may be moved onto a second line.</p>
12261237

1227-
<p class=example> Flexibility is applied to each element, separately for
1228-
each line. The first line has 60 pixels of remaining space, so each of the
1229-
three buttons on that line will receive 20 pixels of extra width. The
1230-
remaining button on a line of its own will stretch to the entire width of
1231-
the containing box, or 300 pixels.
1238+
<p> Flexibility is applied to each element, separately for each line. The
1239+
first line has 60 pixels of remaining space, so each of the three buttons
1240+
on that line will receive 20 pixels of extra width. The remaining button
1241+
on a line of its own will stretch to the entire width of the containing
1242+
box, or 300 pixels.</p>
12321243

1233-
<p class=example> If the box was resized, the buttons may rearrange onto
1234-
different lines as necessary. If the style rules in the example above were
1235-
changed to the following:
1244+
<p> If the box was resized, the buttons may rearrange onto different lines
1245+
as necessary. If the style rules in the example above were changed to the
1246+
following:</p>
12361247

1237-
<pre class=example>
1248+
<pre>
12381249
#div1 {
12391250
display: box;
12401251
box-lines: multiple;
@@ -1248,12 +1259,13 @@ <h2 id=multiple><span class=secno>7 </span>Multiple Lines</h2>
12481259
}
12491260
</pre>
12501261

1251-
<p class=example> Now, each of the buttons will only stretch to include an
1252-
additional 10 pixels of width, as the maximum width of 90 pixels is only
1253-
10 pixels larger than the minimum intrinsic width of the buttons. The
1254-
remaining 30 pixels of space left over is divided up and placed inside the
1255-
box outside of the buttons, as the value of box-pack is center. The fourth
1256-
button will also appear at 90 pixels wide, centered within the box.
1262+
<p> Now, each of the buttons will only stretch to include an additional 10
1263+
pixels of width, as the maximum width of 90 pixels is only 10 pixels
1264+
larger than the minimum intrinsic width of the buttons. The remaining 30
1265+
pixels of space left over is divided up and placed inside the box outside
1266+
of the buttons, as the value of box-pack is center. The fourth button
1267+
will also appear at 90 pixels wide, centered within the box.</p>
1268+
</div>
12571269

12581270
<h3 id=multiple><span class=secno>7.1 </span>Multiple Lines and alignment</h3>
12591271

0 commit comments

Comments
 (0)