FFFF Better explanations in overview, fix some copy-paste errors. · xfq/csswg-drafts@be4b884 · GitHub
Skip to content

Commit be4b884

Browse files
fantasaifantasai
committed
Better explanations in overview, fix some copy-paste errors.
1 parent 82dd496 commit be4b884

2 files changed

Lines changed: 91 additions & 49 deletions

File tree

‎css3-align/Overview.html‎

Lines changed: 59 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,11 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
171171
<ul class=toc>
172172
<li><a href="#child-justify"><span class=secno>5.1. </span>
173173
Inline/Main-Axis Alignment: the ‘<code
174-
class=property>items-justify</code>’ property</a>
174+
class=property>justify-items</code>’ property</a>
175175

176176
<li><a href="#child-align"><span class=secno>5.2. </span>
177177
Stacking/Cross-Axis Alignment: the ‘<code
178-
class=property>items-align</code>’ property</a>
178+
class=property>align-items</code>’ property</a>
179179
</ul>
180180

181181
<li><a href="#conformance"><span class=secno>6. </span> Conformance</a>
@@ -290,6 +290,13 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
290290
dimension they apply to, and whether they control the position of the box
291291
within its parent, or the box's content within itself.
292292

293+
<p class=note>This proposal uses the terms ‘<code
294+
class=property>justify</code>’ and ‘<code
295+
class=property>align</code>’ to distinguish between alignment in the
296+
inline and stacking dimensions, respectively. The choice is somewhat
297+
arbitrary, but having the two terms allows for a consistent naming scheme
298+
that works across all of CSS's layout models.
299+
293300
<p class=issue>True alignment vs. safe alignment. Maybe make safe by
294301
default, true if ‘<a href="#true2"><code class=css>true</code></a>’ is
295302
specified? (Using that in the spec for now.) Or safe/true depending on
@@ -299,10 +306,20 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
299306
their relation to the alignment properties existing in other modules.
300307

301308
<table class=data>
309+
<colgroup span=1></colgroup>
310+
311+
<colgroup span=2></colgroup>
312+
313+
<colgroup span=4></colgroup>
314+
302315
<thead>
303316
<tr>
304317
<th>Common
305318

319+
<th>Axis
320+
321+
<th>Aligns
322+
306323
<th>Flexbox
307324

308325
<th>Grid
@@ -311,15 +328,15 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
311328

312329
<th>Cell
313330

314-
<th>Axis
315-
316-
<th>Aligns
317-
318331
<tbody>
319332
<tr>
320333
<th>‘<a href="#justify-outside"><code
321334
class=property>justify-outside</code></a>’
322335

336+
<td>inline
337+
338+
<td rowspan=2>element within parent
339+
323340
<td>✘
324341

325342
<td>‘<code class=property>grid-row-align</code>’
@@ -328,14 +345,12 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
328345

329346
<td>✘
330347

331-
<td>inline
332-
333-
<td rowspan=2>element within parent
334-
335348
<tr>
336349
<th>‘<a href="#align-outside"><code
337350
class=property>align-outside</code></a>’
338351

352+
<td>stacking
353+
339354
<td>‘<code class=property>flex-item-align</code>’
340355

341356
<td>‘<code class=property>grid-column-align</code>’
@@ -344,13 +359,15 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
344359

345360
<td>✘
346361

347-
<td>stacking
348-
349362
<tbody>
350363
<tr>
351364
<th>‘<a href="#justify-inside"><code
352365
class=property>justify-inside</code></a>’
353366

367+
<td>inline
368+
369+
<td rowspan=2>content within element
370+
354371
<td>‘<code class=property>flex-pack</code>’
355372

356373
<td>✔
@@ -359,14 +376,12 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
359376

360377
<td>✔
361378

362-
<td>inline
363-
364-
<td rowspan=2>content within element
365-
366379
<tr>
367380
<th>‘<a href="#align-inside"><code
368381
class=property>align-inside</code></a>’
< 10054 /code>
369382

383+
<td>stacking
384+
370385
<td>‘<code class=property>flex-line-pack</code>’
371386

372387
<td>✔
@@ -375,13 +390,16 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
375390

376391
<td>✔
377392

378-
<td>stacking
379-
380393
<tbody>
381394
<tr>
382395
<th>‘<a href="#justify-items"><code
383396
class=property>justify-items</code></a>’
384397

398+
<td>inline
399+
400+
<td rowspan=2>items inside element (controls items with ‘<code
401+
class=css>align/justify-outside: auto</code>’)
402+
385403
<td>✘
386404

387405
<td>✔
@@ -390,14 +408,12 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
390408

391409
<td>✘
392410

393-
<td>inline
394-
395-
<td rowspan=2>sets default alignment of grid/flexbox child items
396-
397411
<tr>
398412
<th>‘<a href="#align-items"><code
399413
class=property>align-items</code></a>’
400414

415+
<td>stacking
416+
401417
<td>‘<code class=property>flex-align</code>’
402418

403419
<td>✔
@@ -406,8 +422,6 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
406422

407423
<td>✘
408424

409-
<td>stacking
410-
411425
<tfoot>
412426
<tr>
413427
<td colspan=0><small>✔ indicates the property can be defined to be
@@ -416,8 +430,17 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
416430
layout model</small>
417431
</table>
418432

433+
<p class=note> The ‘<code class=property>-items</code>’ values exist
434+
due to ‘<code class=property>flex-align</code>’. They don't affect the
435+
element itself. When set on a flex container or grid container, they
436+
specify the interpretation of any ‘<code
437+
class=css>align/justify-outside: auto</code>’ used on the items in the
438+
container element.
439+
419440
<div class=issue>
420-
<p>Some alternative naming schemes follow. Thoughts that went into them:
441+
<p><strong>How to consistently and intuitively name alignment
442+
targets?</strong> Some alternative naming schemes follow. Thoughts that
443+
went into them:
421444

422445
<ul>
423446
<li>Using ‘<code class=property>box-</code>’ for self-alignment,
@@ -1093,10 +1116,11 @@ <h3 id=box-align><span class=secno>4.2. </span> Stacking/Cross-Axis
10931116
<h2 id=default-alignment><span class=secno>5. </span> Default Alignment of
10941117
Child Items</h2>
10951118

1096-
<p>The ‘<code class=property>items-align</code>’ and ‘<code
1097-
class=property>items-justify</code>’ properties, when set on a flexbox
1098-
or grid container, set the default ‘<code
1099-
class=property>box-align</code>’ and ‘<code
1119+
<p>The ‘<a href="#align-items"><code
1120+
class=property>align-items</code></a>’ and ‘<a
1121+
href="#justify-items"><code class=property>justify-items</code></a>’
1122+
properties, when set on a flexbox or grid container, set the default
1123+
‘<code class=property>box-align</code>’ and ‘<code
11001124
class=property>box-justify</code>’ behavior of the items contained by
11011125
the element.
11021126

@@ -1105,12 +1129,13 @@ <h2 id=default-alignment><span class=secno>5. </span> Default Alignment of
11051129
</div>
11061130

11071131
<h3 id=child-justify><span class=secno>5.1. </span> Inline/Main-Axis
1108-
Alignment: the ‘<code class=property>items-justify</code>’ property</h3>
1132+
Alignment: the ‘<a href="#justify-items"><code
1133+
class=property>justify-items</code></a>’ property</h3>
11091134

11101135
<p class=issue>This could be applied to grid elements and set the default
11111136
alignment of the grid items. It mainly exists because Flexbox requires
1112-
‘<code class=property>items-align</code>’ (i.e. ‘<code
1113-
class=property>flex-align</code>’); see below.
1137+
‘<a href="#align-items"><code class=property>align-items</code></a>’
1138+
(i.e. ‘<code class=property>flex-align</code>’); see below.
11141139

11151140
<table class=propdef>
11161141
<tbody>
@@ -1171,7 +1196,8 @@ <h3 id=child-justify><span class=secno>5.1. </span> Inline/Main-Axis
11711196
items.
11721197

11731198
<h3 id=child-align><span class=secno>5.2. </span> Stacking/Cross-Axis
1174-
Alignment: the ‘<code class=property>items-align</code>’ property</h3>
1199+
Alignment: the ‘<a href="#align-items"><code
1200+
class=property>align-items</code></a>’ property</h3>
11751201

11761202
<table class=propdef>
11771203
<tbody>

‎css3-align/Overview.src.html‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ <h3 id="values">
125125
<a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
126126
keyword as their property value. For readability it has not been repeated
127127
explicitly.
128+
128129

129130
<h2 id="overview">
130131
Overview of Alignment Properties</h2>
@@ -134,74 +135,89 @@ <h2 id="overview">
134135
and whether they control the position of the box within its parent,
135136
or the box's content within itself.
136137

138+
<p class=note>This proposal uses the terms 'justify' and 'align' to distinguish
139+
between alignment in the inline and stacking dimensions, respectively.
140+
The choice is somewhat arbitrary, but having the two terms allows for
141+
a consistent naming scheme that works across all of CSS's layout models.
142+
137143
<p class=issue>True alignment vs. safe alignment. Maybe make safe by default, true if ''true'' is specified?
138144
(Using that in the spec for now.) Or safe/true depending on layout model (e.g. safe for blocks, true for flexbox).
139145

140146
<p>The following table summarizes the proposed alignment properties
141147
and their relation to the alignment properties existing in other modules.
142148

143149
<table class=data>
150+
<colgroup span=1></colgroup>
151+
<colgroup span=2></colgroup>
152+
<colgroup span=4></colgroup>
144153
<thead>
145154
<tr><th>Common
155+
<th>Axis
156+
<th>Aligns
146157
<th>Flexbox
147158
<th>Grid
148159
<th>Block
149160
<th>Cell
150-
<th>Axis
151-
<th>Aligns
152161
</thead>
153162
<tbody>
154163
<tr><th>'justify-outside'
164+
<td>inline
165+
<td rowspan=2>element within parent
155166
<td>✘
156167
<td>'grid-row-align'
157168
<td>✔
158169
<td>✘
159-
<td>inline
160-
<td rowspan=2>element within parent
161170
<tr><th>'align-outside'
171+
<td>stacking
162172
<td>'flex-item-align'
163173
<td>'grid-column-align'
164174
<td>✘
165175
<td>✘
166-
<td>stacking
167176
</tbody>
168177
<tbody>
169178
<tr><th>'justify-inside'
179+
<td>inline
180+
<td rowspan=2>content within element
170181
<td>'flex-pack'
171182
<td>✔
172183
<td>✔
173184
<td>✔
174-
<td>inline
175-
<td rowspan=2>content within element
176185
<tr><th>'align-inside'
186+
<td>stacking
177 2911 187
<td>'flex-line-pack'
178188
<td>✔
179189
<td>✔
180190
<td>✔
181-
<td>stacking
182191
</tbody>
183192
<tbody>
184193
<tr><th>'justify-items'
194+
<td>inline
195+
<td rowspan=2>items inside element (controls items with ''align/justify-outside: auto'')
185196
<td>✘
186197
<td>✔
187198
<td>✘
188199
<td>✘
189-
<td>inline
190-
<td rowspan=2>sets default alignment of grid/flexbox child items
191200
<tr><th>'align-items'
201+
<td>stacking
192202
<td>'flex-align'
193203
<td>✔
194204
<td>✘
195205
<td>✘
196-
<td>stacking
197206
</tbody>
198207
<tfoot>
199208
<tr><td colspan=0><small>✔ indicates the property can be defined to be useful in that layout model<br>
200209
✘ indicates the property doesn't apply and is not useful in that layout model</small>
201210
</table>
202211

212+
<p class=note>
213+
The '-items' values exist due to &# 6289 39;flex-align'.
214+
They don't affect the element itself.
215+
When set on a flex container or grid container,
216+
they specify the interpretation of any ''align/justify-outside: auto'' used on the items in the container element.
217+
203218
<div class=issue>
204-
<p>Some alternative naming schemes follow. Thoughts that went into them:
219+
<p><strong>How to consistently and intuitively name alignment targets?</strong>
220+
Some alternative naming schemes follow. Thoughts that went into them:
205221
<ul>
206222
<li>Using 'box-' for self-alignment, 'content-' for contents-alignment
207223
<li>Using 'self-' for self-alignment, 'content-' for contents-alignment
@@ -618,7 +634,7 @@ <h3 id="box-align">
618634
<h2 id="default-alignment">
619635
Default Alignment of Child Items</h2>
620636

621-
<p>The 'items-align' and 'items-justify' properties, when set on a
637+
<p>The 'align-items' and 'justify-items' properties, when set on a
622638
flexbox or grid container, set the default 'box-align' and 'box-justify'
623639
behavior of the items contained by the element.
624640

@@ -627,11 +643,11 @@ <h2 id="default-alignment">
627643
</div>
628644

629645
<h3 id="child-justify">
630-
Inline/Main-Axis Alignment: the 'items-justify' property</h3>
646+
Inline/Main-Axis Alignment: the 'justify-items' property</h3>
631647

632648
<p class=issue>This could be applied to grid elements and set
633649
the default alignment of the grid items. It mainly exists because Flexbox
634-
requires 'items-align' (i.e. 'flex-align'); see below.
650+
requires 'align-items' (i.e. 'flex-align'); see below.
635651

636652
<table class=propdef>
637653
<tr>
@@ -669,7 +685,7 @@ <h3 id="child-justify">
669685
<p>Sets the default 'justify-outside' of the grid container's items.
670686

671687
<h3 id="child-align">
672-
Stacking/Cross-Axis Alignment: the 'items-align' property</h3>
688+
Stacking/Cross-Axis Alignment: the 'align-items' property</h3>
673689

674690
<table class=propdef>
675691
<tr>

0 commit comments

Comments
 (0)