Skip to content

Commit d772c49

Browse files
tabatkinstabatkins
committed
[css-align] More layout tweaking.
1 parent b5f8099 commit d772c49

1 file changed

Lines changed: 115 additions & 108 deletions

File tree

‎css-align/Overview.bs‎

Lines changed: 115 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,13 @@ At Risk: ''last-baseline''
2020
</pre>
2121

2222
<style type="text/css">
23-
.issue th:first-child { text-align: left !important; }
24-
[rowspan] > img { float: right; }
25-
[rowspan] { vertical-align: middle; }
26-
table small { display: block; }
23+
.issue th:first-child { text-align: left !important; }
24+
[rowspan] > img { float: right; }
25+
[rowspan] { vertical-align: middle; }
26+
table small { display: block; }
27+
28+
table.align-details { width: 100%; }
29+
.align-details th { font: inherit; white-space: nowrap; width: 1em; }
2730
</style>
2831

2932
<h2 id="intro">
@@ -514,123 +517,127 @@ Details per Layout Mode {#distribution-details}
514517

515518
### Block Containers ### {#distribution-block}
516519

517-
<dl>
518-
<dt><a>Alignment Container</a>
519-
<dd>
520-
The <a>block container</a>’s content box.
521-
522-
<dt><a lt="alignment subject">Alignment Subject(s)</a>
523-
<dd>
524-
The entire contents of the block, as a unit.
525-
526-
<dt>'align-content' axis
527-
<dd>
528-
The <a>block axis</a>.
529-
If a <<content-distribution>> is specified
530-
the <a>fallback alignment</a> is used instead.
531-
532-
<dt>'justify-content' axis
533-
<dd>
534-
Does not apply to and has no effect on <a>block containers</a>.
535-
536-
<dt>''justify-content/normal'' behavior
537-
<dd>
538-
All values other than ''justify-content/normal'' force the block container to establish a new formatting context.
539-
For table cells, the behavior of the ''justify-content/normal'' depends on the computed value of 'vertical-align':
540-
''vertical-align/top'' makes it behave as ''start'',
541-
''vertical-align/middle'' makes it behave as ''center'',
542-
''vertical-align/bottom'' makes it behave as ''end'',
543-
and all other values make it behave as ''baseline''.
544-
''justify-content/normal'' otherwise behaves as ''start''.
545-
</dl>
520+
<table class="data align-details">
521+
<tr>
522+
<th><a>Alignment Container</a>
523+
<td>
524+
The <a>block container</a>’s content box.
525+
<tr>
526+
<th><a lt="alignment subject">Alignment Subject(s)</a>
527+
<td>
528+
The entire contents of the block, as a unit.
529+
<tr>
530+
<th>'align-content' axis
531+
<td>
532+
The <a>block axis</a>.
533+
If a <<content-distribution>> is specified
534+
the <a>fallback alignment</a> is used instead.
535+
<tr>
536+
<th>'justify-content' axis
537+
<td>
538+
Does not apply to and has no effect on <a>block containers</a>.
539+
<tr>
540+
<th>''justify-content/normal'' behavior
541+
<td>
542+
All values other than ''justify-content/normal'' force the block container to establish a new formatting context.
543+
For table cells, the behavior of the ''justify-content/normal'' depends on the computed value of 'vertical-align':
544+
''vertical-align/top'' makes it behave as ''start'',
545+
''vertical-align/middle'' makes it behave as ''center'',
546+
''vertical-align/bottom'' makes it behave as ''end'',
547+
and all other values make it behave as ''baseline''.
548+
''justify-content/normal'' otherwise behaves as ''start''.
549+
</table>
546550

547551
### Multicol Containers ### {#distribution-multicol}
548552

549-
<dl>
550-
<dt><a>Alignment Container</a>
551-
<dd>
552-
The <a>multi-column element</a>’s content box.
553-
554-
<dt><a lt="alignment subject">Alignment Subject(s)</a>
555-
<dd>
556-
The column boxes, as a unit.
557-
558-
Issue: Should this apply to column like it does grid tracks?
559-
''justify-content/normal'' would act as ''stretch'', giving the current behavior.
560-
561-
<dt>'align-content' axis
562-
<dd>
563-
The <a>block axis</a>.
564-
If a <<content-distribution>> is specified
565-
the <a>fallback alignment</a> is used instead.
566-
567-
<dt>'justify-content' axis
568-
<dd>
569-
Does not apply to and has no effect on <a>multi-column elements</a>.
553+
<table class="data align-details">
554+
<tr>
555+
<th><a>Alignment Container</a>
556+
<td>
557+
The <a>multi-column element</a>’s content box.
558+
<tr>
559+
<th><a lt="alignment subject">Alignment Subject(s)</a>
560+
<td>
561+
The column boxes, as a unit.
570562

571-
<dt>''justify-content/normal'' behavior
572-
<dd>
573-
''justify-content/normal'' behaves as ''start''.
574-
</dl>
563+
Issue: Should this apply to column like it does grid tracks?
564+
''justify-content/normal'' would act as ''stretch'', giving the current behavior.
565+
<tr>
566+
<th>'align-content' axis
567+
<td>
568+
The <a>block axis</a>.
569+
If a <<content-distribution>> is specified
570+
the <a>fallback alignment</a> is used instead.
571+
<tr>
572+
<th>'justify-content' axis
573+
<td>
574+
Does not apply to and has no effect on <a>multi-column elements</a>.
575+
<tr>
576+
<th>''justify-content/normal'' behavior
577+
<td>
578+
''justify-content/normal'' behaves as ''start''.
579+
</table>
575580

576581
### Flex Containers ### {#distribution-flex}
577582

578-
<dl>
579-
<dt><a>Alignment Container</a>
580-
<dd>
581-
The <a>flex container</a>’s content box.
582-
583-
<dt><a lt="alignment subject">Alignment Subject(s)</a>
584-
<dd>
585-
For 'justify-content',
586-
the <a>flex items</a> in each <a>flex line</a>.
587-
588-
For 'align-content',
589-
the <a>flex lines</a>.
590-
591-
<dt>'align-content' axis
592-
<dd>
593-
The <a>cross axis</a>.
594-
595-
<dt>'justify-content' axis
596-
<dd>
597-
The 'justify-content' property applies along the <a>main axis</a>,
598-
but since flexing in the <a>main axis</a> is controlled by 'flex',
599-
''<content-distribution>/stretch'' behaves as ''flex-start''
600-
(ignoring the specified <a>fallback alignment</a>, if any).
583+
<table class="data align-details">
584+
<tr>
585+
<th><a>Alignment Container</a>
586+
<td>
587+
The <a>flex container</a>’s content box.
588+
<tr>
589+
<th><a lt="alignment subject">Alignment Subject(s)</a>
590+
<td>
591+
For 'justify-content',
592+
the <a>flex items</a> in each <a>flex line</a>.
601593

602-
<dt>''justify-content/normal'' behavior
603-
<dd>
604-
''justify-content/normal'' behaves as ''<content-distribution>/stretch''.
605-
</dl>
594+
For 'align-content',
595+
the <a>flex lines</a>.
596+
<tr>
597+
<th>'align-content' axis
598+
<td>
599+
The <a>cross axis</a>.
600+
<tr>
601+
<th>'justify-content' axis
602+
<td>
603+
The 'justify-content' property applies along the <a>main axis</a>,
604+
but since flexing in the <a>main axis</a> is controlled by 'flex',
605+
''<content-distribution>/stretch'' behaves as ''flex-start''
606+
(ignoring the specified <a>fallback alignment</a>, if any).
607+
<tr>
608+
<th>''justify-content/normal'' behavior
609+
<td>
610+
''justify-content/normal'' behaves as ''<content-distribution>/stretch''.
611+
</table>
606612

607613
See [[!CSS-FLEXBOX-1]] for details.
608614

609615
### Grid Containers ### {#distribution-grid}
610616

611-
<dl>
612-
<dt><a>Alignment Container</a>
613-
<dd>
614-
The <a>grid container</a>’s content box.
615-
616-
<dt><a lt="alignment subject">Alignment Subject(s)</a>
617-
<dd>
618-
The <a>grid tracks</a>.
619-
620-
<dt>'align-content' axis
621-
<dd>
622-
The <a lt="block axis">block (column) axis</a>,
623-
aligning the <a>grid rows</a>.
624-
625-
<dt>'justify-content' axis
626-
<dd>
627-
The <a lt="inline axis">inline (row) axis</a>,
628-
aligning the <a>grid columns</a>.
629-
630-
<dt>''justify-content/normal'' behavior
631-
<dd>
632-
''justify-content/normal'' behaves as ''stretch''.
633-
</dl>
617+
<table class="data align-details">
618+
<tr>
619+
<th><a>Alignment Container</a>
620+
<td>
621+
The <a>grid container</a>’s content box.
622+
<tr>
623+
<th><a lt="alignment subject">Alignment Subject(s)</a>
624+
<td>
625+
The <a>grid tracks</a>.
626+
<tr>
627+
<th>'align-content' axis
628+
<td>
629+
The <a lt="block axis">block (column) axis</a>,
630+
aligning the <a>grid rows</a>.
631+
<tr>
632+
<th>'justify-content' axis
633+
<td>
634+
The <a lt="inline axis">inline (row) axis</a>,
635+
aligning the <a>grid columns</a>.
636+
<tr>
637+
<th>''justify-content/normal'' behavior
638+
<td>
639+
''justify-content/normal'' behaves as ''stretch''.
640+
</table>
634641

635642
See [[!CSS-GRID-1]] for details.
636643

0 commit comments

Comments
 (0)