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
Copy file name to clipboardExpand all lines: css3-flexbox/Overview.src.html
+66-28Lines changed: 66 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -652,27 +652,63 @@ <h2 id='flex-items'>
652
652
However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows:
653
653
The contents of any caption boxes contribute to the calculation of
654
654
the table wrapper box's min-content and max-content sizes.
655
-
However, the <i>flex item</i>'s final size is calculated by
655
+
However, the <i>flex item</i>'s final size is calculated by
656
656
first laying out the captions,
657
657
and then performing layout as if the distance between
658
658
the table wrapper box's edges and the table box's content edges
659
659
were all part of the table box's border+padding area,
660
660
and the table box were the <i>flex item</i>.
661
661
662
-
<pid='abspos-items'>
663
-
The <ahref="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">hypothetical box</a> used to calculate the <i>static position</i> [[!CSS21]]
664
-
of an absolutely-positioned <i>flex item</i> corresponds to
665
-
that of an anonymous empty flex item
666
-
whose <i>main-axis</i> position,
667
-
after <ahref="#order-property">reordering</a>
668
-
coincides with the <i>main-start</i> edge of
669
-
any subsequent real flex item on the flex line,
670
-
and, being hypothetical, has no effect on flex layout.
671
-
If there is no subsequent real flex item,
672
-
the hypothetical box's <i>main-axis</i> position is
673
-
that of a hypothetical last item on the flex line,
674
-
after any packing spaces that were introduced
675
-
around any previous real items due to ''content-justify: space-around''.
662
+
<h3id='abspos-items'>
663
+
Absolutely-Positioned Flex Items</h3>
664
+
665
+
<p>
666
+
An absolutely-positioned <i>flex item</i> does not participate in flex layout
667
+
beyond the <ahref="#algo-flex-order">reordering step</a>.
668
+
However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'',
669
+
then the used value of those properties
670
+
are computed from its <dfnid='flex-item-static-position'>static position</dfn>, as follows:
671
+
672
+
<p>
673
+
In the <i>main axis</i>,
674
+
675
+
<ol>
676
+
<li>
677
+
If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>,
678
+
the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>.
679
+
680
+
<li>
681
+
Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>,
682
+
the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>.
683
+
684
+
<li>
685
+
Otherwise, the <i>static position</i> is based on the value of 'justify-content' on the <i>flex container</i>:
686
+
687
+
<ul>
688
+
<li>
689
+
if 'justify-content' is ''flex-start'' or ''space-between'',
690
+
it is the inner <i>main-start</i> edge of the <i>flex container</i>;
691
+
692
+
<li>
693
+
if 'justify-content' is ''center'' or ''space-around'',
694
+
it is the center of the content area of the <i>flex container</i>;
695
+
<li>
696
+
if 'justify-content' is ''end'',
697
+
it is the inner <i>main-end</i> edge of the <i>flex container</i>.
698
+
</ul>
699
+
</ol>
700
+
701
+
<p>
702
+
In the <i>cross axis</i>,
703
+
if there is a preceding in-flow <i>flex item</i>,
704
+
the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i>
705
+
that item is in.
706
+
Otherwise, the <i>static position</i> is the <i>cross-start edge</i> of the first <i>flex line</i>.
707
+
708
+
<pclass='note'>
709
+
These rules are intended to more-or-less match
710
+
what the position would be if the abspos was a 0x0 flex item
711
+
that participated in layout.
676
712
677
713
<h3id='item-margins'>
678
714
Flex Item Margins</h3>
@@ -864,21 +900,23 @@ <h3 id='min-size-auto'>
864
900
865
901
<divclass="note" id="min-size-opt">
866
902
<p>
867
-
Note that while a content-based minimum size is often appropriate,
868
-
and helps prevent content from overlapping or spilling outside its container,
869
-
in some cases it is not:
903
+
Note that while a content-based minimum size is often appropriate,
904
+
and helps prevent content from overlapping or spilling outside its container,
905
+
in some cases it is not:
906
+
870
907
<p>
871
-
In particular, if flex sizing is being used for a major content area of a document,
872
-
it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
873
-
A content-based minimum width could result in a large table or large image
874
-
stretching the size of the entire content area into an overflow zone,
875
-
and thereby making lines of text gratuitously long and hard to read.
908
+
In particular, if flex sizing is being used for a major content area of a document,
909
+
it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
910
+
A content-based minimum width could result in a large table or large image
911
+
stretching the size of the entire content area into an overflow zone,
912
+
and thereby making lines of text gratuitously long and hard to read.
913
+
876
914
<p>
877
-
Note also, when content-based sizing is used on an item with large amounts of content,
878
-
the layout engine must traverse all of this content before finding its minimum size,
879
-
whereas if the author sets an explicit minimum, this is not necessary.
880
-
(For items with small amounts of content, however,
881
-
this traversal is trivial and therefore not a problem.)
915
+
Note also, when content-based sizing is used on an item with large amounts of content,
916
+
the layout engine must traverse all of this content before finding its minimum size,
917
+
whereas if the author sets an explicit minimum, this is not necessary.
918
+
(For items with small amounts of content, however,
919
+
this traversal is trivial and therefore not a problem.)
0 commit comments