forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathOverview.new.src.html
More file actions
executable file
·731 lines (631 loc) · 29.2 KB
/
Copy pathOverview.new.src.html
File metadata and controls
executable file
·731 lines (631 loc) · 29.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Flexible Box Layout Module</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED"> <!-- TODO: remove before build -->
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
<link rel="stylesheet" type="text/css" href="../default.css">
<style type="text/css">
.style1 {
background-color: #FFFF00;
}
</style>
</head><body>
<div class="head">
<h1 id="head-box-flexible">Flexible Box Layout Module</h1>
<h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS], [DATE]</h2>
<dl>
<dt>This version:
<dd><!-- <a href="http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a></dd> -->
<a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
<dt>Editors:
<dd>Tab Atkins Jr. <a href="mailto:jackalmage@gmail.com">jackalmage@gmail.com</a>
<dd>Alex Mogilevsky <a href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
<dd>L. David Baron, Mozilla Corporation, <a href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>
<dt>Authors and former editors:
<dd>Neil Deakin, Mozilla Corporation, <a href="mailto:enndeakin@gmail.com">enndeakin@gmail.com</a>
<dd>Ian Hickson, formerly of Opera Software, <a href="mailto:ian@hixie.ch">ian@hixie.ch</a>
<dd>David Hyatt, Apple, <a href="mailto:hyatt@apple.com">hyatt@apple.com</a>
</dl>
<!--copyright-->
</div>
<hr>
<div>
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>The draft describes a CSS box model optimized for interface design.
It provides an additional layout system alongside the ones already in
CSS. [[!CSS21]] In this new box model, the children of a box are
laid out either horizontally or vertically, and unused space can be
assigned to a particular child or distributed among the children by
assignment of "flex" to the children that should expand.
Nesting of these boxes (horizontal inside vertical, or vertical inside
horizontal) can be used to build layouts in two dimensions. This
model is based on the box model in the XUL user-interface language
used for the user interface of many Mozilla-based applications
(such as Firefox).</p>
</div>
<div>
<h2 class="no-num no-toc" id="table">Table of contents</h2>
<!--toc-->
</div>
<hr>
<div>
<h2 id="overview">Overview</h2>
<p>CSS 2.1 defined three layout modes, algorithms which determine the size and
position of boxes based on their relationships with their sibling and ancestor
boxes: normal layout, designed for laying out documents and simple applications,
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,
flexbox layout, which is designed for laying out more complex applications and
webpages.</p>
<p>In CSS, flexboxes may be created by setting the 'display' property. A block-level
flexbox can be specified with a value of ''flexbox'' and an inline flexbox can be
specified using a value of ''inline-flexbox''. A block-level flexbox placed inside
a block level element is positioned and sized as if it were any other block.
An inline-level flexbox placed inside another element is positioned and sized
like an inline-block.</p>
<p class=issue>It's expected that the 'display' property will be split into
'display-inside' and 'display-outside' subproperties to specify, respectively,
how elements layout themselves and their children, and how they are laid out by
their parents. Once this happens, we can cut this down to merely
''display-inside:flexbox'', and let people set 'display-outside' to ''block'' or
''inline'' as they wish, or even ''table-cell''.</p>
<p>Inline children of a flexbox are wrapped in anonymous blocks. All other children
are block-level. These anonymous blocks or block-level boxes are referred to as
''flexbox children'' in this specification.</p>
<p>Flexbox children may specify their width and height using the 'width' and
'height' properties. The width and height of replaced elements is computed as with
replaced elements in inline contexts. Otherwise, if the width is set to ''auto'', then the
used value is the intrinsic size, which may be calculated using a shrink-to-fit algorithm,
as with inline-block elements, i.e., it will be given the minimum amount of space required
to lay out the element without unnecessary line breaks. Similarly, if the height is set to
''auto'', then the used value in a similar manner.</p>
<p>An unnested flexbox placed inside an enclosing block will obey all the
usual sizing rules of the block. For example, setting the width of an unnested flexbox to
100% ensures that the flexbox is the maximum width permitted by the enclosing block
(ignoring any margins, border and padding on that box).</p>
<p>The difference between flexboxes and blocks is in how the children of the
element are laid out. Flexbox children are all block-level (inline-level
contents get wrapped in anonymous blocks).
These blocks then get stacked in the direction specified by the 'flex-direction'
property and order specified by the 'flex-order' property. They are aligned
within the box according to their margins and the 'flex-align' property. The
flexbox children may then flex or be distributed as specified by their margins,
the 'flex' property, and the 'flex-pack' property.</p>
</p><p>
<p>The 'float' and 'clear' properties do not apply to flexbox children, so the
used value of these properties is ''none''. Similarly, none of the properties
defined in the CSS Multicol module apply to flexboxes or flexbox children, so
the used value of all such properties is the initial value.</p>
<div class="example">
<p>For example:</p>
<pre class=html>
<p style="width: 400px; display: flexbox;">
<button style="width: 200px;">Child 1</button>
<button style="width: 100px;">Child 2</button>
</p>
</pre>
<p>In this example, the first button is 200 pixels wide and the second button is
100 pixels wide. As the flexbox is 400 pixels wide, there is extra space left over
which is placed after the two buttons but inside the flexbox. The placement of this
extra space may be modified using the various flex properties described in the next
sections. Neither the height of the buttons nor the height of the flexbox are specified,
so the height is computed intrinsically from the content. In this case, the buttons
will be the height needed to display the label and button border, and the flexbox will
also be this height plus any margins around the buttons.</p>
</div>
<p>Elements within a box may use the 'overflow' property
to control whether a scrolling mechanism appears when the children of a box overflow.
A scrolling mechanism may be displayed when flexible elements are reduced below their minimum
intrinsic size when the overflow property is set to ''auto'' or ''scroll''.
If 'overflow' is ''hidden'', the element will be clipped instead. <em>Note
that the initial value is ''visible'', which is
typically not the preferred effect in user interfaces.</em></p>
</div>
<!-- ====================================================================== -->
<div>
<h2 id=display-flexbox>New values for 'display' property</h2>
<table class="propdef">
<tbody>
<tr>
<th>Name:
<td>display
<tr>
<th>New value:
<td>flexbox
</tbody>
</table>
<p>You can declare that an element is a flexbox, and thus should use flexbox
layout, by setting the 'display' property on the element to the value
''flexbox''.</p>
<p>All children of a flexbox must be block-level or atomic inline-level
elements. Contiguous runs of non-replaced inline elements are wrapped in an
anonymous block-level box. Out-of-flow elements (such as absolutely
positioned elements - floats are also out-of-flow but can't exist as flexbox
children) leave behind a "placeholder" in their original source
location which is treated like a non-replaced inline element for the purpose of
this wrapping. (This can, for example, create an empty flexbox child, if all
the children are block-level elements and one is absolutely positioned.) It is
recommended that authors avoid putting in elements which are auto-wrapped with
anonymous boxes, as the anonymous boxes cannot be targetted and controlled with
the various flexbox properties defined in later sections.</p>
<p>A flexbox child creates a new BFC. The margins of a flexbox child
do not collapse with any other margin.</p>
<p>Setting ''display:flexbox'' on an element forces it to use a new layout
algorithm, and so some properties that were designed with the assumption of
"normal" flow don't make sense in a flexbox context. In particular:</p>
<ul>
<li>all of the 'column-*' properties in the Multicol module compute to their initial
values on a flexbox ('break-before', 'break-inside', and 'break-after' are still
valid on a flexbox).</li>
<li>'float' and 'clear' compute to their initial values on a flexbox child</li>
<li class=issue>[Others?]</li>
</ul>
</div>
<!-- ====================================================================== -->
<div>
<h2 id=flex-direction>Flexbox Direction: the 'flex-direction' property</h2>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn>flex-direction</dfn>
<tr>
<th>Values:
<td>lr | rl | tb | bt | inline | inline-reverse | block | block-reverse
<tr>
<th>Initial:
<td>inline
<tr>
<th>Applies To:
<td>flexboxes
<tr>
<th>Inherited:
<td>no
<tr>
<th>Computed Value:
<td>See text
<tr>
<th>Media:
<td>visual
</tbody>
</table>
<p>The 'flexbox-direction' property specifies how flexbox children
are placed on each line of the flexbox. A value of ''lr'' means that
the first flexbox child is placed against the left edge of the flexbox, with
later children placed immediately to the right of the preceding flexbox child.
A value of ''rl'' is the same, but with the initial flexbox child
placed against the right edge of the flexbox and later children placed to the
left. Both of these values mean that the flexbox is a <dfn>horizontal
flexbox</dfn>. A value of ''tb'' means that the first flexbox
child is placed against the top edge of the flexbox, with later children placed
immediately below it, while ''bt'' means the first child is placed
against the bottom edge of the flexbox, with later children placed immediately
above it. Both of these values mean that the flexbox is a <dfn>vertical
flexbox</dfn>.</p>
<p>A value of ''inline'' computes to one of ''lr'', ''rl'', ''tb'', or ''bt'',
depending on the direction and block-flow of the flexbox: if the start side of
the flexbox is the left side, ''inline'' must compute to ''lr''; similarly, if
the start side of the flexbox is the right, top, or bottom side, ''inline''
must compute to ''rl'', ''tb'', or ''bt'' respectively. ''inline-reverse'',
''block'', and ''block-reverse'' determine their computed value identically to
''inline'', but use the location of the end side, before side, and after side
of the flexbox, respectively.</p>
<div class=example>
<p>A vertical flexbox can be used to emulate the functionality of HTML's
''<center>'' element:</p>
<pre>
<div>
<span>foo foo foo foo</span>
<span>bar bar<br>bar bar</span>
<span>foo foo foo foo foo foo foo foo foo foo foo foo</span>
</div>
<style>
div {
display: flexbox;
flex-direction: tb;
width: 200px;
}
span {
margin: 0 auto;
}
</style>
</pre>
<p><img alt="" src="images/basic-vertical-flexbox.png"></p>
</div>
<p>In the rest of this specification, the direction in which new flexbox children
are laid out will be referred to as the <dfn>layout direction</dfn> (if a
precise direction is required) or the <dfn>layout axis</dfn> (if only the axis
orientiation is required).</p>
<p>The axis perpendicular to the ''layout axis'' will be refered to as the
<dfn>transverse axis</dfn>, with the <dfn>transverse direction</dfn> being
either a line extending from the ''before'' side of the flexbox to the ''after''
side, or from the ''start'' side of the flexbox to the ''end'' side, whichever
would produce a direction parallel to the ''transverse axis''.</p>
<p>Similarly, the <dfn>layout size</dfn> is the width of the flexbox child in
a horizontal flexbox, or the height in a vertical flexbox. The <dfn>transverse size</dfn>
is the height of the flexbox child in a horizontal flexbox, or the width in a
vertical flexbox.</p>
</div>
<!-- ====================================================================== -->
<div>
<h2 id=flex-order>Display Order: the 'flex-order' property</h2>
<p>Flexbox children are, by default, displayed and laid out in the same order
as they appear in the source document. The 'flex-order' property may be used
to change this ordering.</p>
<table class=propdef>
<tr>
<th>Name:
<td><dfn>flex-order</dfn>
<tr>
<th>Value:
<td><integer>
<tr>
<th>Initial:
<td>1
<tr>
<th>Applies to:
<td>flexbox children</td>
<tr>
<th>Inherited:
<td>no
<tr>
<th>Computed value:
<td>specified value
<tr>
<th>Media:
<td>visual
</table>
<p class=issue>Maybe name this 'flex-index' instead, to be consistent with 'z-index'.</p>
<p>Flexbox children may be assigned to ''ordinal groups'' using the 'flex-order'
property. This property is an integer with an initial value of 1.</p>
<p>Ordinal groups control the order in which flexbox children appear. A flexbox
will lay out its children starting from the lowest numbered ordinal group and
going up. Elements with the same ordinal group are laid out in the order they
appear in the source document.
<div class=example>
<p>This example shows how ordinal groups might be used.</p>
<pre><code>
div { display: flexbox; }
#span1 { flex-order: 2; }
#span3 { flex-order: 2; }
#span4 { flex-order: 1; }
<div>
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
<span id="span4">span4</span>
</div></code></pre>
<p>The first ordinal group, 1, contains span2 and span4. As span2 does not
specify an ordinal group, it will default to 1. The elements will be displayed
in document order, so span2 will be displayed before span4. The second ordinal
group, 2, contains the remaining two spans. The resulting display order will
be:</p>
<pre><code>span2 span4 span1 span3</code></pre>
</div>
</div>
<!-- ====================================================================== -->
<div>
<h2 id=flex>Flexibility: the 'flex' property</h2>
<p>Each flexbox child may be made either ''flexible'' or ''inflexible''. Flexible
elements may grow when the flexbox has extra space available after the size of
all the flexbox children have been computed, or shrink if the combined size
of all the flexbox children would cause the flexbox to overflow. Inflexible
elements do not change size, even when there it too much or too little space
left over in the flexbox.</p>
<p>When figuring out how large a flexible flexbox child is, CSS starts with
the flexbox child's <dfn>preferred size</dfn>, which is simply the size specified
in the 'width' or 'height' property. It then grows or shrinks that size based
on the available free space and the flexbox child's relative flexibility.</p>
<p>The flexibility defined in this section only affects the size of flexbox child
in the ''layout axis''. (That is, it only affects the width of a flexbox child
in a horizontal flexbox, or the height in a vertical flexbox.)</p>
<table class=propdef>
<tr>
<th>Name:
<td><dfn>flex-grow</dfn>
<tr>
<th>Value:
<td><number>
<tr>
<th>Initial:
<td>0.0
<tr>
<th>Applies to:
<td>flexbox children
<tr>
<th>Inherited:
<td>no
<tr>
<th>Computed Value:
<td>specified value
<tr>
<th>Media:
<td>visual
</table>
<table class=propdef>
<tr>
<th>Name:
<td><dfn>flex-shrink</dfn>
<tr>
<th>Value:
<td><number>
<tr>
<th>Initial:
<td>0.0
<tr>
<th>Applies to:
<td>flexbox children
<tr>
<th>Inherited:
<td>no
<tr>
<th>Computed Value:
<td>specified value
<tr>
<th>Media:
<td>visual
</table>
<p>An element is <dfn>flexible</dfn> when the 'flex-grow' or 'flex-shrink' property is
non-zero. These properties are floating point values representing the flexibility
of the flexbox child when the flexbox children are too small or too large, respectively,
for the flexbox. When there is extra space left over in a flexbox, the flexible
elements with a non-zero 'flex-grow' are expanded to fill that space. When a
flexbox's contents would overflow the flexbox, the flexible elements with a
non-zero 'flex-shrink' are shrunk to keep the contents from overflowing.</p>
<p>All flexibility is relative. For example, a flexbox child with a 'flex-grow'
of 2 is twice as flexible (and thus will absorb twice as much free space) as
a flexbox child with a 'flex-grow' of 1.</p>
<p>Both 'flex-grow' and 'flex-shrink' must be non-negative. A negative value
for either property is a syntax error.</p>
<p>The precise details of how flexibility is treated are defined in a later
section of this specification. Generally, flexbox children compute their
''preferred size'' in the ''layout axis'', which is then summed between all
the flexbox children and subtracted from the size of the flexbox in the
''layout axis''. If the resultant value is positive, there is free space left
over, and it is apportioned out to each flexbox child relative to their 'flex-grow'
value, so that their actual size is their ''preferred size'' plus their portion
of the free space. If the resultant value is negative, the flexbox's contents
would overflow, and so each flexbox child has its size reduced relative to its
'flex-shrink' value so that the flexbox's contents fit in the flexbox without
overflowing.</p>
<p>Margins and paddings can take up the free space as well. If a margin or
padding in the ''layout axis'' is ''auto'', they'll take up free space as if
they had a flexibility of 1 and started from a size of 0. Because their size
starts at 0, they don't participate in shrinking calculations.
<table class=propdef>
<tr>
<th>Name:
<th><dfn>flex</dfn>
<tr>
<tr>Value:
<td><number> <number>?
<tr>
<th>Initial:
<td>0.0
<tr>
<th>Inherited:
<td>no
<tr>
<th>Computed Value:
<td>specified value
<tr>
<th>Media:
<td>visual
</table>
<p>The 'flex' property is a shorthand that can set both 'flex-grow' and 'flex-shrink'
at the same time. It accepts one or two numbers, which must be non-negative.
Negative numbers are a syntax error.</p>
<p>If a single number is given, both 'flex-grow' and 'flex-shrink' are set to
that value. If two numbers are given, 'flex-grow' is set to the first value
and 'flex-shrink' is set to the second.</p>
<div class=example>
<p class=issue>TODO: Add examples.</p>
</div>
<!--
If the size in the layout axis is computed first, then 'auto' resolves as 'fit-content'.
Do the flexing calculations, set real size, then calculate the size in the transverse
axis using this size. Do flexing calcs in the transverse axis.
If the size in the layout axis is computed second, then resolve the size in the
transverse axis with as 'fit-content', and using this, determine the size in the layout
axis. Do the flexing calculations, set real size. Continue using the same value
previously determined to do flexing in the transverse axis.
-->
<div class=issue>
<p>Somewhat concerned here. The way it works right now is that 'width'
sets the preferred width, and 'flex' determines how the preferred width
changes in response to free space.</p>
<p>Many people seem to find this unintuitive, though. We can prevent this
from being a problem in common cases by, frex, making ''width:auto'' give
a preferred width of ''min-content'', but should we solve this more directly?
It appears that forcing absolute flex through setting "width:0" is also
unintuitive.</p>
<p>"Fixing" this would probably involve using flex units or perhaps a flex()
function in 'width' and 'height', so that you specify the flexibility and
the preferred width at the same time, in the seemingly-logical place: the
'width' property.</p>
</div>
</div>
<!-- ====================================================================== -->
<div>
<h2 id=flex-align>Alignment: the 'flex-align' property</h2>
<p>When the size of the flexbox is larger than the size of a child, extra space
will be available. The 'margin', 'padding', 'width', 'height', and 'flex-align'
properties specify how a flexbox's children are placed and aligned along the
''transverse axis'', and where the extra space, if any, is positioned.</p>
<p>The amount of extra space may be different for each flexbox child. For
example, if a horizontal flexbox has a height of 200px and contains two children
at heights of 100px and 150px, there will be 100px of extra space for the first
child and 50px of extra space for the second child.</p>
<p>As in the previous section, the precise details of the free space distribution
are detailed in a later section. This section merely gives an informative
overview of the process.</p>
<p>The amount of free space is determined by subtracting the ''transverse size''
of the flexbox child from the size of the flexbox in the same axis. If either
of the flexbox child's margins are ''auto'', they take all of the available free
space, splitting it equally between them if they are both ''auto''. If neither
margin is ''auto'', but at least one of the 'padding' values in the ''transverse axis''
are, then the free space is apportioned to the auto padding, again splitting the
free space equally if both paddings are ''auto''. If none of the margins or
paddings in the ''transverse axis'' are ''auto'', but the 'width' or 'height'
(whichever is in the ''transverse axis'') are, then that size is given all of
the free space. Finally, if nothing in the ''transverse axis'' is ''auto''
for the flexbox child, the free space is placed after the margin box in the
''transverse direction''.</p>
<div class=example>
<p class=issue>Examples go here.</p>
</div>
<table class=propdef>
<tr>
<th>Name:
<td><dfn>flex-align</dfn>
<tr>
<th>Value:
<td>auto | baseline
<tr>
<th>Initial:
<td>auto
<tr>
<th>Applies to:
<td>flexbox children
<tr>
<th>Inherited:
<td>no
<tr>
<th>Computed Value:
<td>specified value
<tr>
<th>Media:
<td>visual
</table>
<p>The 'flex-align' property changes how free space is distributed in the
''transverse axis''. If set to ''auto'', this property does nothing special -
free space distribution proceeds as outlined above.</p>
<p>However, if 'flex-align' is set to ''baseline'', then the distribution of
free space is changed to try and align the baselines of all flexbox children
with ''flex-align: baseline''.</p>
<div class=issue>
<p>So, I'm not sure what I want to do here. Possibilities include:</p>
<ol>
<li>Specify how things changes the resolution of auto margin/padding/height</li>
<li>Move this property up onto the flexbox, where it makes <em>everyone</em>
baseline-align no matter what, with some switches to determine whether
the flexbox children stretch or shrink as well.</li>
<li>Magic?</li>
</ol>
<p>I think I like #2. #1 seems complex and tricky. #3 is more difficult
unless I become a wizard, which isn't in my career plan at the moment.</p>
<p>I just need more use-case data on exactly what we need baseline alignment
for.</p>
</div>
</div>
<div>
<h2>Packing along the box axis</h2>
<p class=issue>TODO: rewrite this section. The property won't change, it just
needs reformatting and refreshing.</p>
<DL>
<DT>new property</DT>
<DD><CODE>flex-pack</CODE></DD>
<DT>values</DT>
<DD><CODE>start | end | center | justify</CODE></DD>
<DT>default value</DT>
<DD><CODE>start</CODE></DD>
<DT>applies to</DT>
<DD>flexboxes</DD></DL>
<P>The <CODE>flex-pack</CODE> property specifies what to do with leftover free
space if there are no flexible widths or margins, or if all flexible widths have
grown to their maximum size and there is still space left over.</P>
<P>The <CODE>start</CODE> value specifies that flexbox children will be packed
toward the start of the flexbox (this is not necessarily the 'start' logical
edge - it's the edge of the flexbox that flexbox children are first placed
against). That is, any leftover free space must be placed at the end of the
flexbox.</P>
<P>Similarly, the <CODE>end</CODE> value specifies that flexbox children will be
packed toward the end of the flexbox (same caveat as above applies). That is,
leftover free space is placed at the start of the flexbox.</P>
<P>The <CODE>center</CODE> value specifies that flexbox children will be placed
in the center of the flexbox; leftover free space is split equally between being
placed at the start and end of the flexbox.</P>
<P>The <CODE>justify</CODE> value specifies that flexbox children will be spaced
evenly in the flexbox; if there are N flexbox children, leftover free space is
split into N-1 equal parts and inserted between each flexbox child. There is no
free space placed at the start or the end of the flexbox; the first and last
flexbox child will be flush with the edges of the flexbox.</P>
</div>
<div>
<h2 id=free-space-algorithm>Free Space Calculation and Distribution</h2>
<p class="issue">TODO: to be completed. I've done it once before, I just need
to make the necessary modifications to accomodate the changes, once we've
decided on what changes to make.</p>
</div>
<div>
<h2 id="inlinesAndBlocks">Relationship to Inlines and blocks</h2>
<div class=issue>
<p>This section seems necessary, but not the precise way it's written. I
need to identify precisely what data needs to be exposed both by the containing
layout model (for the flexbox to use) and by the flexbox (for the containing
layout model to use), and then write that up. Then the other layout models
we produce can re-use the same template.</p>
</div>
<p>
A box placed in a block is considered a block level element and will be positioned
and sized according to the rules for CSS 2.1 (section 10.3 for widths). Specifically,
the following equation applies for calculating the width:
</p>
<blockquote>
<p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = width of containing block
</p>
</blockquote>
<p>All children of 'box' elements are block-level. If inline-level elements are nested
inside boxes, they get wrapped in an anonymous block which then takes part in the
box layout.
</p><p>
If the width of a child of a flexible box is computed as 'auto', then the used value
is the shrink-to-fit width. This calculation is done similarly to how the width of
a floating element is determined. Otherwise if the width has a computed value,
then that value is used as the width.
</p><p>
In a horizontally oriented box, the flexibility is then applied which may increase
or decrease the used width. In a vertically oriented box, the position and size
of the child may be adjusted by the value of the container's
<span class="property">'box-align'</span> property.
</p><p>
The <span class="property">'min-width'</span>, <span class="property">'min-height'</span>,
<span class="property">'max-width'</span>, and <span class="property">'max-height'</span>
CSS properties act the same on boxes as on blocks.
</p><p>
The height of a child of a flexible box is determined in the same manner as specified
in the CSS specification. The used height may further be adjusted by the container's
<span class="property">'box-align'</span> property in a horizontally
oriented box, or the flexibility in a vertically oriented box.
</p><p>
Note that it is possible for a horizontally oriented box that the height of a
flexible child containing an inline descendant will change when the flexibility is
applied. Similarly, in a vertically oriented box, the height of a child may change
based on the <span class="property">'box-align'</span> property of the
box.
</p>
</div>
<hr title="Separator from footer">
<h2 class="no-num" id="acknowledgments"><a name="acknowledgments">Acknowledgments</a></h2>
<p>[This section will contain further acknowledgments.]</p>
<p>Thanks for feedback from James Elmore and Shinichiro Hamaji.</p>
<h2 class="no-num" id="references">References</h2>
<h3 class="no-num" id="normative">Normative references</h3>
<!--normative-->
<h2 class="no-num" id="index">Index</h2>
<!--index-->
<h2 id="property" class="no-num">Property index</h2>
<!--properties-->
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->
</body></html>