@@ -12,8 +12,8 @@ Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
12
12
Previous Version : http://www.w3.org/TR/2013/WD-css3-align-20130514/
13
13
Previous Version : http://www.w3.org/TR/2012/WD-css3-align-20120612/
14
14
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
17
17
Ignored Terms : table cell, stretch
18
18
At Risk : ''last-baseline''
19
19
</pre>
@@ -466,9 +466,9 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
466
466
467
467
All values other than ''justify-content/auto'' force the block container to establish a new formatting context.
468
468
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'' ,
472
472
and all other values make it behave as ''baseline'' .
473
473
''justify-content/auto'' otherwise behaves as ''start'' .
474
474
@@ -489,27 +489,29 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
489
489
''justify-content/auto'' computes to ''<content-distribution>/stretch'' .
490
490
491
491
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> .
494
494
495
495
The 'align-content' property applies along the <a>cross axis</a> .
496
496
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'' .
498
499
499
500
See [[!CSS3-FLEXBOX]] for details.
500
501
501
502
<dt> Grid Containers:
502
503
<dd>
503
- ''justify-content/auto'' computes to ''start'' , and ''<content-distribution>/stretch'' behaves like ''start'' .
504
+ ''justify-content/auto'' computes to ''start'' .
504
505
505
506
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> .
508
508
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.
513
515
</dl>
514
516
515
517
<h3 id="baseline-align-content">
@@ -678,11 +680,6 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
678
680
The default <a>overflow alignment</a> is ''true'' .
679
681
</dl>
680
682
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
-
686
683
<div class="example">
687
684
The effect of these rules is that an auto-sized block-level table,
688
685
for example, can be aligned while still having side margins.
@@ -824,7 +821,7 @@ Inline/Main-Axis Alignment: the 'justify-items' property</h3>
824
821
825
822
<pre class="propdef">
826
823
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'' ] ]
828
825
Initial : auto
829
826
Applies to : block containers, flex containers, and grid containers
830
827
Inherited : no
@@ -855,7 +852,7 @@ Inline/Main-Axis Alignment: the 'justify-items' property</h3>
855
852
<dt> <dfn>legacy</dfn>
856
853
<dd>
857
854
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.
859
856
The alignment keyword, but not the ''legacy'' keyword, is passed to 'justify-self' .
860
857
It exists to implement the legacy alignment behavior of HTML's <code> <center></code> element and <code> align</code> attribute.
861
858
</dl>
0 commit comments