Skip to content

Commit 7167a7c

Browse files
tabatkinstabatkins
committed
[css-align] Reformat the align-self section too.
1 parent 5c34750 commit 7167a7c

1 file changed

Lines changed: 93 additions & 53 deletions

File tree

‎css-align/Overview.bs‎

Lines changed: 93 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -840,7 +840,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
840840
and the margins provide appropriate spacing from the containing block edges.
841841
</div>
842842

843-
### Absolutely-positioned Boxes ### {#justify-abspos}
843+
### Absolutely-Positioned Boxes ### {#justify-abspos}
844844

845845
<table class="data align-details">
846846
<tr>
@@ -880,7 +880,13 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
880880
'justify-self' has no effect.
881881
</table>
882882

883-
### Table Cells ### {#justify-self}
883+
Issue: When you have non-auto left/right and auto width,
884+
legacy behavior stretches the width and ignores margins.
885+
We should keep "auto" around for abspos,
886+
and have it do this legacy behavior.
887+
Any other value (including "stretch") should do standard "auto margins get first dibs" behavior.
888+
889+
### Table Cells ### {#justify-cell}
884890

885891
This property does not apply to table cells,
886892
because their position and size is fully constrained by table layout.
@@ -927,7 +933,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
927933
Animatable: no
928934
</pre>
929935

930-
Aligns the box within its parent along the block/column/cross axis:
936+
Aligns the box within its containing block along the block/column/cross axis:
931937
the box's outer edges are aligned within its <a>alignment container</a>
932938
<a href="#alignment-values">as described by its alignment value</a>.
933939

@@ -936,76 +942,110 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
936942
or ''align-self/normal'' if the box has no parent.
937943

938944
The <dfn value for="align-self">normal</dfn> keyword
939-
represents the "default" alignment for the layout mode.
945+
represents the “default” alignment for the layout mode.
940946

941947
The ''align-self/stretch'' keyword is as defined in [[#justify-self-property]].
942948

943949
All other values are as defined in [[#alignment-values]], above.
944950

945-
<hr>
951+
Note: ''margin/auto'' margins,
952+
because they effectively adjust the size of the margin area,
953+
take precedence over 'justify-self'.
946954

947-
<dl>
948-
<dt>Block-level Boxes:
949-
<dd>
950-
The 'align-self' property does not apply to block-level boxes
951-
(including floats),
952-
because there is more than one item in the <a>block axis</a>.
955+
### Block-Level Boxes ### {#align-block}
953956

954-
''align-self/normal'' behaves as ''start''.
957+
The 'align-self' property does not apply to block-level boxes
958+
(including floats),
959+
because there is more than one item in the <a>block axis</a>.
955960

956-
<dt>Absolutely-positioned Boxes:
957-
<dd>
958-
The 'align-self' property applies along its containing block's <a>block axis</a>.
961+
### Absolutely-Positioned Boxes ### {#align-abspos}
959962

960-
When neither margin in this dimension is ''margin/auto''
961-
and neither offset property in this dimension is ''top/auto'',
962-
values other than ''align-self/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
963-
to use shrink-to-fit sizing for calculating ''width/auto'' measures,
964-
and 'align-self' dictates alignment as follows:
963+
<table class="data align-details">
964+
<tr>
965+
<th>'align-self' Axis
966+
<td>
967+
The block’s containing block’s <a>block axis</a>.
968+
<tr>
969+
<th><a>Alignment Container</a>
970+
<td>
971+
The box's containing block.
972+
<tr>
973+
<th><a>Alignment Subject</a>
974+
<td>
975+
The box’s margin box.
976+
<tr>
977+
<th>''align-self/normal'' Behavior
978+
<td>
979+
Consistent with CSS2.1,
980+
the ''align-self/normal'' keyword behaves as ''start'' on replaced absolutely-positioned boxes,
981+
and behaves as ''align-self/stretch'' on all other absolutely-positioned boxes.
982+
<tr>
983+
<th>Other Details
984+
<td>
985+
In terms of CSS2.1 formatting [[!CSS21]],
986+
the rules for "over-constrained" computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">section 10.6.4</a>
987+
are ignored in favor of alignment as specified here
988+
and the used value of the offset properties are not adjusted to correct for the over-constraint.
965989

966-
Issue: When you have non-auto left/right and auto width,
967-
legacy behavior stretches the width and ignores margins.
968-
We should keep "auto" around for abspos,
969-
and have it do this legacy behavior.
970-
Any other value (including "stretch") should do standard "auto margins get first dibs" behavior.
990+
Values other than ''align-self/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
991+
to use shrink-to-fit sizing for calculating ''height/auto'' block sizes.
971992

972-
The <a>alignment container</a> is the box's containing block
973-
as modified by the offset properties ('top'/'right'/'bottom'/'left').
974-
The <a>alignment subject</a> is the box's margin box.
993+
Note that ''justify-self/stretch'' does cause replaced absolutely-positioned elements to fill their containing block
994+
just as non-replaced ones do.
975995

976-
In terms of CSS2.1 formatting [[!CSS21]],
977-
the rules for "over-constrained" computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">section 10.6.4</a>
978-
are ignored in favor of alignment as specified here
979-
and the used value of the offset properties are not adjusted to correct for the over-constraint.
996+
If either offset property in this dimension is ''top/auto'',
997+
'align-self' has no effect.
998+
</table>
980999

981-
The ''align-self/normal'' keyword behaves as ''start'' on replaced absolutely-positioned boxes,
982-
and behaves as ''align-self/stretch'' on all other absolutely-positioned boxes.
983-
(This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
1000+
### Table Cells ### {#align-cell}
9841001

985-
<dt>Table Cells:
986-
<dd>
987-
This property does not apply to table cells,
988-
because their position and size is fully constrained by table layout.
1002+
This property does not apply to table cells,
1003+
because their position and size is fully constrained by table layout.
9891004

990-
<dt>Flex Items:
991-
<dd>
992-
The 'align-self' property applies along the flexbox's <a>cross axis</a>.
1005+
### Flex Items ### {#align-flex}
9931006

994-
The <a>alignment container</a> is the <a>flex line</a> the item is in.
995-
The <a>alignment subject</a> is the <a>flex item</a>’s margin box.
996-
See [[!CSS3-FLEXBOX]] for details.
1007+
<table class="data align-details">
1008+
<tr>
1009+
<th>'align-self' Axis
1010+
<td>
1011+
The <a>flex container’s</a> <a>cross axis</a>.
1012+
<tr>
1013+
<th><a>Alignment Container</a>
1014+
<td>
1015+
The <a>flex line</a> the <a>flex item</a> is in.
1016+
<tr>
1017+
<th><a>Alignment Subject</a>
1018+
<td>
1019+
The <a>flex item’s</a> margin box.
1020+
<tr>
1021+
<th>''align-self/normal'' Behavior
1022+
<td>
1023+
Behaves as ''align-self/stretch''.
1024+
</table>
9971025

998-
''align-self/normal'' behaves as ''align-self/stretch''.
1026+
See [[!CSS-FLEXBOX-1]] for details.
9991027

1000-
<dt>Grid Items:
1001-
<dd>
1002-
The 'align-self' property applies along the grid's <a>column axis</a>.
1028+
### Grid Items ### {#align-grid}
10031029

1004-
The <a>alignment container</a> is the <a>grid area</a>.
1005-
The <a>alignment subject</a> is the <a>grid item</a>’s margin box.
1030+
<table class="data align-details">
1031+
<tr>
1032+
<th>'align-self' Axis
1033+
<td>
1034+
The grid’s <a>column axis</a>.
1035+
<tr>
1036+
<th><a>Alignment Container</a>
1037+
<td>
1038+
The <a>grid area</a>.
1039+
<tr>
1040+
<th><a>Alignment Subject</a>
1041+
<td>
1042+
The <a>grid item’s</a> margin box.
1043+
<tr>
1044+
<th>''align-self/normal'' Behavior
1045+
<td>
1046+
Behaves as ''align-self/stretch''.
1047+
</table>
10061048

1007-
''align-self/normal'' behaves as ''align-self/stretch''.
1008-
</dl>
10091049

10101050
<h3 id="baseline-align-self">
10111051
Baseline Self-Alignment</h3>

0 commit comments

Comments
 (0)