Skip to content

Commit 5c34750

Browse files
tabatkinstabatkins
committed
[css-align] Reformat justify-self sections. Remove line about auto margins in abspos section; replace with generic statement up higher.
1 parent 3e3fc86 commit 5c34750

1 file changed

Lines changed: 111 additions & 67 deletions

File tree

‎css-align/Overview.bs‎

Lines changed: 111 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -759,7 +759,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
759759
Animatable: no
760760
</pre>
761761

762-
Justifies the box within its parent along the inline/row/main axis:
762+
Justifies the box within its containing block along the inline/row/main axis:
763763
the box's outer edges are aligned within its <a>alignment container</a>
764764
<a href="#alignment-values">as described by its alignment value</a>.
765765

@@ -769,8 +769,8 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
769769
or ''justify-self/normal'' if the box has no parent.
770770

771771
The <dfn value for="justify-self">normal</dfn> keyword
772-
represents the "default" alignment for the layout mode.
773-
Its behavior depends on the layout model, as described below.
772+
represents the “default” alignment for the layout mode.
773+
Its behavior depends on the layout mode, as described below.
774774

775775
When the box’s computed 'width'/'height' (as appropriate to the axis) is ''width/auto''
776776
and neither of its margins (in the appropriate axis) are ''margin/auto'',
@@ -788,85 +788,129 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
788788

789789
All other values are as defined in [[#alignment-values]], above.
790790

791-
<hr>
792-
793-
<dl>
794-
<dt>Block-level Boxes:
795-
<dd>
796-
The 'justify-self' property applies along its containing block's <a>inline axis</a>.
797-
798-
The <a>alignment container</a> is the block's containing block
799-
except that for block-level elements that establish a block formatting context
800-
and are placed next to a float,
801-
the <a>alignment container</a> is reduced by the space taken up by the float.
802-
(Note: This is the legacy behavior of HTML <code>align</code>.)
803-
The <a>alignment subject</a> is the block's margin box.
804-
805-
In terms of CSS2.1 block-level formatting [[!CSS21]],
806-
the rules for "over-constrained" computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">section 10.3.3</a>
807-
are ignored in favor of alignment as specified here
808-
and the used value of the offset properties are not adjusted to correct for the over-constraint.
809-
810-
This property does not apply to floats.
791+
Note: ''margin/auto'' margins,
792+
because they effectively adjust the size of the margin area,
793+
take precedence over 'justify-self'.
811794

812-
''justify-self/normal'' behaves as ''justify-self/start''.
795+
### Block-Level Boxes ### {#justify-block}
813796

797+
<table class="data align-details">
798+
<tr>
799+
<th>'justify-self' Axis
800+
<td>
801+
The block’s containing block’s <a>inline axis</a>.
802+
<tr>
803+
<th><a>Alignment Container</a>
804+
<td>
805+
The block's containing block,
806+
except that for block-level elements that establish a block formatting context
807+
and are placed next to a float,
808+
the <a>alignment container</a> is reduced by the space taken up by the float.
809+
810+
Issue: This is the legacy behavior of HTML <code>align</code>.
811+
Do we want to still do this,
812+
or should we do the centering behavior of margins,
813+
which center while <em>ignoring</em> floats,
814+
then shift if necessary to avoid overlapping?
815+
<tr>
816+
<th><a>Alignment Subject</a>
817+
<td>
818+
The block's margin box.
819+
<tr>
820+
<th>''justify-self/normal'' Behavior
821+
<td>
822+
Behaves as ''justify-self/start''.
823+
<tr>
824+
<th>Other Details
825+
<td>
826+
In terms of CSS2.1 block-level formatting [[!CSS21]],
827+
the rules for “over-constrained” computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">section 10.3.3</a>
828+
are ignored in favor of alignment as specified here
829+
and the used value of the offset properties are not adjusted to correct for the over-constraint.
814830

815-
<dt>Absolutely-positioned Boxes:
816-
<dd>
817-
The 'justify-self' property applies along its containing block's <a>inline axis</a>.
831+
This property does not apply to floats.
832+
</table>
818833

819-
If either margin in this dimension is ''margin/auto'',
820-
or either offset property in this dimension is ''top/auto'',
821-
'justify-self' has no effect.
822-
Otherwise, its effects are defined below.
834+
<div class="example">
835+
The effect of these rules is that an auto-sized block-level table,
836+
for example, can be aligned while still having side margins.
837+
If the table's max-content size is narrower than its containing block,
838+
then it is shrink-wrapped to that size and aligned as specified.
839+
If the table's max-content size is wider, then it fills its containing block,
840+
and the margins provide appropriate spacing from the containing block edges.
841+
</div>
823842

824-
The ''justify-self/normal'' keyword behaves as ''start'' on replaced absolutely-positioned boxes,
825-
and behaves as ''justify-self/stretch'' on all other absolutely-positioned boxes.
826-
(This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
843+
### Absolutely-positioned Boxes ### {#justify-abspos}
827844

828-
Values other than ''justify-self/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
829-
to use shrink-to-fit sizing for calculating ''width/auto'' measures.
845+
<table class="data align-details">
846+
<tr>
847+
<th>'justify-self' Axis
848+
<td>
849+
The block’s containing block’s <a>inline axis</a>.
850+
<tr>
851+
<th><a>Alignment Container</a>
852+
<td>
853+
The box's containing block,
854+
as modified by the offset properties ('top'/'right'/'bottom'/'left').
855+
<tr>
856+
<th><a>Alignment Subject</a>
857+
<td>
858+
The box's margin box.
859+
<tr>
860+
<th>''justify-self/normal'' Behavior
861+
<td>
862+
Consistent with CSS2.1,
863+
the ''justify-self/normal'' keyword behaves as ''start'' on replaced absolutely-positioned boxes,
864+
and behaves as ''justify-self/stretch'' on all other absolutely-positioned boxes.
865+
<tr>
866+
<th>Other Details
867+
<td>
868+
In terms of CSS2.1 formatting [[!CSS21]],
869+
the rules for “over-constrained” computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">section 10.3.7</a>
870+
are ignored in favor of alignment as specified here,
871+
and the used value of the offset properties are not adjusted to correct for the over-constraint.
830872

831-
The <a>alignment container</a> is the box's containing block
832-
as modified by the offset properties ('top'/'right'/'bottom'/'left').
833-
The <a>alignment subject</a> is the box's margin box.
873+
Values other than ''justify-self/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
874+
to use <a>fit-content sizing</a> for calculating ''width/auto'' inline sizes.
834875

835-
In terms of CSS2.1 formatting [[!CSS21]],
836-
the rules for "over-constrained" computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">section 10.3.7</a>
837-
are ignored in favor of alignment as specified here
838-
and the used value of the offset properties are not adjusted to correct for the over-constraint.
876+
Note that ''justify-self/stretch'' does cause replaced absolutely-positioned elements to fill their containing block
877+
just as non-replaced ones do.
839878

879+
If either offset property in this dimension is ''top/auto'',
880+
'justify-self' has no effect.
881+
</table>
840882

841-
<dt>Table Cells:
842-
<dd>
843-
This property does not apply to table cells,
844-
because their position and size is fully constrained by table layout.
883+
### Table Cells ### {#justify-self}
845884

846-
<dt>Flex Items:
847-
<dd>
848-
This property does not apply to <a>flex items</a>,
849-
because there is more than one item in the <a>main axis</a>.
850-
See 'flex' for stretching and 'justify-content' for <a>main-axis</a> alignment. [[!CSS3-FLEXBOX]]
885+
This property does not apply to table cells,
886+
because their position and size is fully constrained by table layout.
851887

852-
<dt>Grid Items:
853-
<dd>
854-
The 'justify-self' property applies along the grid's <a>row axis</a>.
888+
### Flex Items ### {#justify-flex}
855889

856-
The <a>alignment container</a> is the <a>grid area</a>.
857-
The <a>alignment subject</a> is the <a>grid item</a>’s margin box.
890+
This property does not apply to <a>flex items</a>,
891+
because there is more than one item in the <a>main axis</a>.
892+
See 'flex' for stretching and 'justify-content' for <a>main-axis</a> alignment. [[!CSS-FLEXBOX-1]]
858893

859-
''justify-self/normal'' behaves as ''justify-self/stretch''.
860-
</dl>
894+
### Grid Items ### {#justify-grid}
861895

862-
<div class="example">
863-
The effect of these rules is that an auto-sized block-level table,
864-
for example, can be aligned while still having side margins.
865-
If the table's max-content size is narrower than its containing block,
866-
then it is shrink-wrapped to that size and aligned as specified.
867-
If the table's max-content size is wider, then it fills its containing block,
868-
and the margins provide appropriate spacing from the containing block edges.
869-
</div>
896+
<table class="data align-details">
897+
<tr>
898+
<th>'justify-self' Axis
899+
<td>
900+
The grid’s <a>row axis</a>.
901+
<tr>
902+
<th><a>Alignment Container</a>
903+
<td>
904+
The <a>grid area</a>.
905+
<tr>
906+
<th><a>Alignment Subject</a>
907+
<td>
908+
The <a>grid item’s</a> margin box.
909+
<tr>
910+
<th>''justify-self/normal'' Behavior
911+
<td>
912+
Behaves as ''justify-self/stretch''.
913+
</table>
870914

871915
<h3 id='align-self-property'>
872916
Block/Cross-Axis Alignment: the 'align-self' property</h3>

0 commit comments

Comments
 (0)