You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>A flexbox can be either <i>single-line</i> or <i>multi-line</i>, depending on the 'flex-wrap' property. A <dfn>single-line</dfn> flexbox lays out all of its children in a single line, even if that would cause the flexbox to overflow its bounds. A <dfn>multi-line</dfn> flexbox breaks its <i>flexbox items</i> across multiple lines to avoid overflowing, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. Every line contains at least one <i>flexbox item</i>, unless the flexbox itself is completely empty.
379
+
<p>
380
+
A flexbox can be either <i>single-line</i> or <i>multi-line</i>,
381
+
depending on the 'flex-wrap' property.
382
+
A <dfn>single-line</dfn> flexbox lays out all of its children in a single line,
383
+
even if that would cause the flexbox to overflow its bounds.
384
+
A <dfn>multi-line</dfn> flexbox breaks its <i>flexbox items</i> across multiple lines to avoid overflowing,
385
+
similar to how text is broken onto a new line when it gets too wide to fit on the existing line.
386
+
Every line contains at least one <i>flexbox item</i>,
387
+
unless the flexbox itself is completely empty.
380
388
381
-
<p>When additional lines are created, they are stacked in the flexbox in the <i>cross-axis</i>. Each line is completely independent; flexible lengths and the 'flex-pack' and 'flex-align' properties only consider the items on a single line at a time. The <i>main size</i> of a line is the same as the <i>main size</i> of the flexbox's content box. The <i>cross size</i> of a line depends on whether the flexbox is <i>single-line</i> or <i>multi-line</i>: the <i>cross size</i> of the sole line in a <i>single-line</i> flexbox is the same as the <i>cross size</i> of the flexbox's content box, while the <i>cross size</i> of a line in a <i>multi-line</i> flexbox is the minimum size necessary to contain the <i>flexbox items</i> on the line, after aligning them with 'flex-align'. The lines themselves are then aligned within a flexbox with the 'flex-line-pack' property.
389
+
<p>
390
+
When additional lines are created,
391
+
they are stacked in the flexbox in the <i>cross axis</i>.
392
+
Each line is completely independent;
393
+
flexible lengths and the 'flex-pack' and 'flex-align' properties only consider the items on a single line at a time.
394
+
The <i>main size</i> of a line is the same as the <i>main size</i> of the flexbox's content box.
395
+
The <i>cross size</i> of a line depends on whether the flexbox is <i>single-line</i> or <i>multi-line</i>:
396
+
the <i>cross size</i> of the sole line in a <i>single-line</i> flexbox is the same as the <i>cross size</i> of the flexbox's content box,
397
+
while the <i>cross size</i> of a line in a <i>multi-line</i> flexbox is
398
+
the minimum size necessary to contain the <i>flexbox items</i> on the line,
399
+
after aligning them with 'flex-align'.
400
+
The lines themselves are then aligned within a flexbox with the 'flex-line-pack' property.
382
401
383
402
<divclass=example>
384
-
<p>This example shows four buttons that do not fit horizontally.
403
+
<p>
404
+
This example shows four buttons that do not fit horizontally.
385
405
386
406
<pre><style>
387
407
#div1 {
@@ -401,9 +421,23 @@ <h2 id='multi-line'>
401
421
<button id="button4">Wildebeest</button>
402
422
</div></pre>
403
423
404
-
<p>The buttons are first set to their preferred widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the 'flex-flow' property specifies a multi-line flexbox (due to the ''wrap'' keyword appearing in its value), the flexbox will create an additional line to contain the last button.
424
+
<p>
425
+
The buttons are first set to their preferred widths,
426
+
in this case 80 pixels.
427
+
This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space.
428
+
Because the 'flex-flow' property specifies a multi-line flexbox
429
+
(due to the ''wrap'' keyword appearing in its value),
430
+
the flexbox will create an additional line to contain the last button.
405
431
406
-
<p>Flexibility is applied to each element, separately for each line. The first line has 60 pixels of remaining space and all of the buttons have the same flexibility, so each of the three buttons on that line will receive 20 pixels of extra width, ending up 100px wide. The remaining button is on a line of its own and will stretch to the entire width of the line, or 300 pixels.
432
+
<p>
433
+
Flexibility is applied to each element,
434
+
separately for each line.
435
+
The first line has 60 pixels of remaining space
436
+
and all of the buttons have the same flexibility,
437
+
so each of the three buttons on that line will receive 20 pixels of extra width,
438
+
ending up 100px wide.
439
+
The remaining button is on a line of its own
440
+
and will stretch to the entire width of the line, or 300 pixels.
<p>If the box was resized, the buttons may rearrange onto different lines as necessary.
449
+
<p>
450
+
If the box was resized, the buttons may rearrange onto different lines as necessary.
416
451
417
-
<p>If the style rules in the example above were changed to the following:
452
+
<p>
453
+
If the style rules in the example above were changed to the following:
418
454
419
455
<pre>
420
456
#div1 {
@@ -428,7 +464,17 @@ <h2 id='multi-line'>
428
464
max-width: 90px;
429
465
}</pre>
430
466
431
-
<p>Similar to the previous example, the first three buttons will fit on the first line, and the last button will wrap onto a new line. However, when the buttons attempt to flex they can only grow to 90px each, due to their 'max-width' property. This leaves 30px of free space on the first line and 210px of free space on the second line. Because 'flex-pack' is set to ''center'', the buttons will be centered on each line, with the free space split equally on either side.
467
+
<p>
468
+
Similar to the previous example,
469
+
the first three buttons will fit on the first line,
470
+
and the last button will wrap onto a new line.
471
+
However, when the buttons attempt to flex they can only grow to 90px each,
<p>The first level of flexbox functionality is the ability to lay out a flexbox's contents in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as using the 'float' property to lay out a horizontal navigation bar (which then requires further effort with the 'clear' property or others to make the elements interact nicely with the rest of the page). This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'flex-order' properties.
490
+
<p>
491
+
The first level of flexbox functionality is the ability to lay out a flexbox's contents in any direction and in any order.
492
+
This allows an author to trivially achieve effects that would previously have required complex or fragile methods,
493
+
such as using the 'float' property to lay out a horizontal navigation bar
494
+
(which then requires further effort with the 'clear' property or others to make the elements interact nicely with the rest of the page).
495
+
This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'flex-order' properties.
445
496
446
497
<h3id='flex-direction'>
447
498
Flexbox Flow Direction: the 'flex-direction' property</h3>
@@ -476,20 +527,35 @@ <h3 id='flex-direction'>
476
527
<td>as specified
477
528
</table>
478
529
479
-
<p>The 'flex-direction' property specifies how <i>flexbox items</i> are placed in the flexbox, by setting the direction of the flexbox's <i>main-axis</i>. This affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' property.
530
+
<p>
531
+
The 'flex-direction' property specifies how <i>flexbox items</i> are placed in the flexbox,
532
+
by setting the direction of the flexbox's <i>main axis</i>.
533
+
This affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' property.
480
534
481
535
<dl>
482
536
<dt><dfnid='flex-flow-row'>row</dfn>
483
-
<dd>The flexbox's <i>main-axis</i> has the same orientation as the inline-axis of the current <ahref="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a> (the direction that text is laid out in). The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "start" and "end" directions, respectively, of the current <ahref="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a>.
537
+
<dd>
538
+
The flexbox's <i>main axis</i> has the same orientation as the inline axis of the current <ahref="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a>
539
+
(the direction that text is laid out in).
540
+
The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "start" and "end" directions, respectively,
541
+
of the current <ahref="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a>.
<dd>Same as <i>row</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.
544
+
<dd>
545
+
Same as <i>row</i>,
546
+
except the <i>main-start</i> and <i>main-end</i> directions are swapped.
487
547
488
548
<dt><dfnid='flex-flow-column'>column</dfn>
489
-
<dd>The flexbox's <i>main-axis</i> has the same orientation as the block-axis of the current <ahref="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a> (the direction that blocks are laid out in). The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "before" and "after" directions, respectively, of the current <ahref="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a>.
549
+
<dd>
550
+
The flexbox's <i>main axis</i> has the same orientation as the block axis of the current <ahref="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a>
551
+
(the direction that blocks are laid out in).
552
+
The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "before" and "after" directions, respectively,
553
+
of the current <ahref="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a>.
0 commit comments