Skip to content

Commit a4c574b

Browse files
committed
[css-align] Make grid content distribution operate on grid tracks (not on the grid as a unit) and defer to css-grid-layout for details. Fix various linking errors.
1 parent 0f776b4 commit a4c574b

File tree

2 files changed

+44
-56
lines changed

2 files changed

+44
-56
lines changed

css-align/Overview.bs

+19-22
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
1212
Previous Version: http://www.w3.org/TR/2013/WD-css3-align-20130514/
1313
Previous Version: http://www.w3.org/TR/2012/WD-css3-align-20120612/
1414
Abstract: This module contains the features of <a href="http://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in [[CSS3TEXT]] and [[CSS3LINE]].)
15-
!Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/39">http://www.w3.org/Style/CSS/Tracker/products/39</a>
16-
Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height, css-writing-modes-3 (dfn) dominant baseline
15+
Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/39
16+
Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height, css-writing-modes-3 (dfn) dominant baseline, css-position-3 (property) left
1717
Ignored Terms: table cell, stretch
1818
At Risk: ''last-baseline''
1919
</pre>
@@ -466,9 +466,9 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
466466

467467
All values other than ''justify-content/auto'' force the block container to establish a new formatting context.
468468
For table cells, the behavior of the ''justify-content/auto'' depends on the computed value of 'vertical-align':
469-
''top'' makes it behave as ''start'',
470-
''middle'' makes it behave as ''center'',
471-
''bottom'' makes it behave as ''end'',
469+
''vertical-align/top'' makes it behave as ''start'',
470+
''vertical-align/middle'' makes it behave as ''center'',
471+
''vertical-align/bottom'' makes it behave as ''end'',
472472
and all other values make it behave as ''baseline''.
473473
''justify-content/auto'' otherwise behaves as ''start''.
474474

@@ -489,27 +489,29 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
489489
''justify-content/auto'' computes to ''<content-distribution>/stretch''.
490490

491491
The <a>alignment container</a> is the <a>flex container</a>’s content box.
492-
For 'justify-content', the <a>alignment subject</a> is the <a>flex items</a> in each <a>flex line</a>;
493-
for 'align-content', the <a>alignment subject</a> is the <a>flex lines</a>.
492+
For 'justify-content', the <a>alignment subjects</a> are the <a>flex items</a> in each <a>flex line</a>;
493+
for 'align-content', the <a>alignment subjects</a> are the <a>flex lines</a>.
494494

495495
The 'align-content' property applies along the <a>cross axis</a>.
496496
The 'justify-content' property applies along the <a>main axis</a>,
497-
but ''<content-distribution>/stretch'' behaves as ''flex-start''.
497+
but since flexing in the <a>main axis</a> is controlled by 'flex',
498+
''<content-distribution>/stretch'' behaves as ''flex-start''.
498499

499500
See [[!CSS3-FLEXBOX]] for details.
500501

501502
<dt>Grid Containers:
502503
<dd>
503-
''justify-content/auto'' computes to ''start'', and ''<content-distribution>/stretch'' behaves like ''start''.
504+
''justify-content/auto'' computes to ''start''.
504505

505506
The <a>alignment container</a> is the <a>grid container</a>’s content box.
506-
The <a>alignment subject</a> is the bounds of the <a>grid</a>.
507-
<span class='issue'>Need to dfn a better term for this in Grid.</span>
507+
The <a>alignment subjects</a> are the <a>grid tracks</a>.
508508

509-
The 'align-content' property applies along the <a title="block axis">block (column) axis</a>.
510-
The 'justify-content' property applies along the <a title="inline axis">inline (row) axis</a>.
511-
In both properties, if a <<content-distribution>> is specified,
512-
the <a>fallback alignment</a> is used instead.
509+
The 'align-content' property applies along the <a title="block axis">block (column) axis</a>,
510+
aligning the <a>grid rows</a>.
511+
The 'justify-content' property applies along the <a title="inline axis">inline (row) axis</a>,
512+
aligning the <a>grid columns</a>.
513+
514+
See [[!CSS3-GRID-LAYOUT]] for details.
513515
</dl>
514516

515517
<h3 id="baseline-align-content">
@@ -678,11 +680,6 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
678680
The default <a>overflow alignment</a> is ''true''.
679681
</dl>
680682

681-
<p class='issue'>
682-
Should we make ''<item-position>/stretch'' actually work on block-level/abspos replaced boxes?
683-
To maintain legacy compat, this requires adding a new value (named ''normal''?)
684-
which has the current behavior of stretching non-replaced boxes and start-aligning replaced ones.
685-
686683
<div class="example">
687684
The effect of these rules is that an auto-sized block-level table,
688685
for example, can be aligned while still having side margins.
@@ -824,7 +821,7 @@ Inline/Main-Axis Alignment: the 'justify-items' property</h3>
824821

825822
<pre class="propdef">
826823
Name: justify-items
827-
Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ] | [ legacy && [ ''left'' | ''right'' | ''center'' ] ]
824+
Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ] | [ legacy && [ ''<content-position>/left'' | ''<content-position>/right'' | ''<content-position>/center'' ] ]
828825
Initial: auto
829826
Applies to: block containers, flex containers, and grid containers
830827
Inherited: no
@@ -855,7 +852,7 @@ Inline/Main-Axis Alignment: the 'justify-items' property</h3>
855852
<dt><dfn>legacy</dfn>
856853
<dd>
857854
This keyword causes the value to effectively inherit into descendants.
858-
It can only be combined with the ''center'', ''left'', and ''right'' positions.
855+
It can only be combined with the ''<content-position>/center'', ''left'', and ''right'' positions.
859856
The alignment keyword, but not the ''legacy'' keyword, is passed to 'justify-self'.
860857
It exists to implement the legacy alignment behavior of HTML's <code>&lt;center></code> element and <code>align</code> attribute.
861858
</dl>

0 commit comments

Comments
 (0)