Skip to content

Commit bf05c10

Browse files
tabatkinstabatkins
committed
Committing for a checkpoint.
1 parent 5bc2fa7 commit bf05c10

1 file changed

Lines changed: 106 additions & 36 deletions

File tree

‎css3-flexbox/Overview.new.src.html‎

Lines changed: 106 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ <h2 id=flex-order>Display Order: the 'flex-order' property</h2>
324324

325325
<p class=issue>Maybe name this 'flex-index' instead, to be consistent with 'z-index'.</p>
326326

327-
<p>Flexbox children may be assigned to ''ordinal groups'' using the 'flex-order'
327+
<p>Flexbox children may be assigned to ordinal groups using the 'flex-order'
328328
property. This property is an integer with an initial value of 1.</p>
329329

330330
<p>Ordinal groups control the order in which flexbox children appear. A flexbox
@@ -488,7 +488,16 @@ <h2 id=flex>Flexibility: the 'flex' property</h2>
488488
and 'flex-shrink' is set to the second.</p>
489489

490490
<div class=example>
491-
<p class=issue>TODO: Add examples.</p>
491+
<p class=issue>TODO: Add example showing basic usage.</p>
492+
</div>
493+
494+
<div class=example>
495+
<p class=issue>TODO: Add example showing dynamic changes of flex (via :hover?).</p>
496+
</div>
497+
498+
<div class=example>
499+
<p class=issue>TODO: Add example showing the interaction of flex and different
500+
preferred sizes.</p>
492501
</div>
493502
<!--
494503
If the size in the layout axis is computed first, then 'auto' resolves as 'fit-content'.
@@ -518,6 +527,98 @@ <h2 id=flex>Flexibility: the 'flex' property</h2>
518527

519528
<!-- ====================================================================== -->
520529

530+
<div>
531+
<h2 id=flex-pack>Aligning in the layout axis: the 'flex-pack' property</h2>
532+
<table class=propdef>
533+
<tr>
534+
<th>Name:
535+
<td><dfn>flex-pack</dfn>
536+
<tr>
537+
<th>Value:
538+
<td>start | end | center | justify</td>
539+
<tr>
540+
<th>Initial:
541+
<td>start
542+
<tr>
543+
<th>Applies to:
544+
<td>flexboxes
545+
<tr>
546+
<th>Inherited:
547+
<td>no
548+
<tr>
549+
<th>Computed Value:
550+
<td>specified value
551+
<tr>
552+
<th>Media:
553+
<td>visual
554+
</table>
555+
556+
<p>After resolving
557+
<P>The <CODE>flex-pack</CODE> property specifies what to do with leftover free
558+
space if there are no flexible widths or margins, or if all flexible widths have
559+
grown to their maximum size and there is still space left over.</P>
560+
<P>The <CODE>start</CODE> value specifies that flexbox children will be packed
561+
toward the start of the flexbox (this is not necessarily the 'start' logical
562+
edge - it's the edge of the flexbox that flexbox children are first placed
563+
against). That is, any leftover free space must be placed at the end of the
564+
flexbox.</P>
565+
<P>Similarly, the <CODE>end</CODE> value specifies that flexbox children will be
566+
packed toward the end of the flexbox (same caveat as above applies). That is,
567+
leftover free space is placed at the start of the flexbox.</P>
568+
<P>The <CODE>center</CODE> value specifies that flexbox children will be placed
569+
in the center of the flexbox; leftover free space is split equally between being
570+
placed at the start and end of the flexbox.</P>
571+
<P>The <CODE>justify</CODE> value specifies that flexbox children will be spaced
572+
evenly in the flexbox; if there are N flexbox children, leftover free space is
573+
split into N-1 equal parts and inserted between each flexbox child. There is no
574+
free space placed at the start or the end of the flexbox; the first and last
575+
flexbox child will be flush with the edges of the flexbox.</P>
576+
</div>
577+
578+
<!-- ====================================================================== -->
579+
580+
<p>A flexbox has two axes, which are treated differently by the space distribute algorithm: the <b>layout axis</b>, which is the axis along which the flexbox grows as you add more children, and the <b>transverse axis</b>, which is the perpendicular axis.</p>
581+
582+
<img alt="In a horizontal flexbox, the layout axis is horizontal, while the transverse axis is vertical.">
583+
584+
<p>The layout axis is more interesting, as there are more places where things can potentially flex. As such, there are more controls for specifying how to distribute free space in this axis: the 'width' or 'height' property starts things off, modified by the 'flex' property; the 'margin' property gives individual control over spacing between flexbox children; and the 'flex-pack' property gives a more flexbox-global level of control over the between-children spacing.</p>
585+
586+
<p>In general terms, determining where to allocate free space in the layout axis starts by determining just how much free space there is. All the non-flexible lengths, and the preferred sizes of all the flexible widths or heights, are subtracted from the total width or height of the flexbox. If a positive length is left over, this is split up among all the flexible lengths according to their flexibility. Flexible margins automatically have a flexibility of 1, while widths or heights have their flexibility specified by the 'flex-grow' property.</p>
587+
588+
<div class=example>
589+
<p>Three boxes, all with a preferred size of 0, will end up with sizes exactly proportional to their flex-grow values.</p>
590+
<img alt="">
591+
</div>
592+
<div class=example>
593+
<p>If the three boxes have different preferred sizes, then they'll split the free space proportionately, but their final sizes won't be exactly proportional.</p>
594+
<img alt="">
595+
</div>
596+
<div class=example>
597+
<p>Margins can also participate in flex calculations. They have a preferred size of 0, and a flexibility of 1.</p>
598+
<img alt="">
599+
</div>
600+
601+
<p>If none of the lengths are flexible, or if all the flexible widths or height have reached their maximum size (if 'max-width' or 'max-height' properties are in effect), then any leftover space is distributed according to the 'flex-pack' property between the margins of the flexbox children.</p>
602+
603+
<div class=example>
604+
<p>If the flexbox is small enough, then the flexible child can absorb all the space...</p>
605+
<img>
606+
<p>...but if it gets large enough, there'll be extra space left over for 'flex-pack' to distribute.</p>
607+
<img>
608+
</div>
609+
610+
<p>If the original calculation of how much free space was left gave a negative length (that is, if the preferred sizes of all the flexbox children sum to a larger length than the width or height of the flexbox), then flexible margins get set to 0, 'flex-pack' has no effect, and flexbox children with a non-zero 'flex-shrink' value split the responsibility for shrinking between themselves proportionally. Just like when they grow, their size starts from the preferred size, then combines that with the proportional share of (negative) space.</p>
611+
612+
<div class=example>
613+
<p>When the children are too wide, the shrinkable elements reduce their size to fit...</p>
614+
<img>
615+
<p>...but if they all reach their minimum size, they just overflow.</p>
616+
</div>
617+
618+
[write the transverse axis section]
619+
620+
<!-- ====================================================================== -->
621+
521622
<div>
522623
<h2 id=flex-align>Alignment: the 'flex-align' property</h2>
523624

@@ -600,40 +701,7 @@ <h2 id=flex-align>Alignment: the 'flex-align' property</h2>
600701
</div>
601702
</div>
602703

603-
<div>
604-
<h2>Packing along the box axis</h2>
605-
<p class=issue>TODO: rewrite this section. The property won't change, it just
606-
needs reformatting and refreshing.</p>
607-
<DL>
608-
<DT>new property</DT>
609-
<DD><CODE>flex-pack</CODE></DD>
610-
<DT>values</DT>
611-
<DD><CODE>start | end | center | justify</CODE></DD>
612-
<DT>default value</DT>
613-
<DD><CODE>start</CODE></DD>
614-
<DT>applies to</DT>
615-
<DD>flexboxes</DD></DL>
616-
<P>The <CODE>flex-pack</CODE> property specifies what to do with leftover free
617-
space if there are no flexible widths or margins, or if all flexible widths have
618-
grown to their maximum size and there is still space left over.</P>
619-
<P>The <CODE>start</CODE> value specifies that flexbox children will be packed
620-
toward the start of the flexbox (this is not necessarily the 'start' logical
621-
edge - it's the edge of the flexbox that flexbox children are first placed
622-
against). That is, any leftover free space must be placed at the end of the
623-
flexbox.</P>
624-
<P>Similarly, the <CODE>end</CODE> value specifies that flexbox children will be
625-
packed toward the end of the flexbox (same caveat as above applies). That is,
626-
leftover free space is placed at the start of the flexbox.</P>
627-
<P>The <CODE>center</CODE> value specifies that flexbox children will be placed
628-
in the center of the flexbox; leftover free space is split equally between being
629-
placed at the start and end of the flexbox.</P>
630-
<P>The <CODE>justify</CODE> value specifies that flexbox children will be spaced
631-
evenly in the flexbox; if there are N flexbox children, leftover free space is
632-
split into N-1 equal parts and inserted between each flexbox child. There is no
633-
free space placed at the start or the end of the flexbox; the first and last
634-
flexbox child will be flush with the edges of the flexbox.</P>
635-
</div>
636-
704+
<!-- ====================================================================== -->
637705

638706
<div>
639707
<h2 id=free-space-algorithm>Free Space Calculation and Distribution</h2>
@@ -643,6 +711,8 @@ <h2 id=free-space-algorithm>Free Space Calculation and Distribution</h2>
643711
decided on what changes to make.</p>
644712
</div>
645713

714+
<!-- ====================================================================== -->
715+
646716
<div>
647717
<h2 id="inlinesAndBlocks">Relationship to Inlines and blocks</h2>
648718
<div class=issue>

0 commit comments

Comments
 (0)