8000 csswg-drafts/css-align-3/Overview.bs at 8fa7adc286c6d928372a67637a4dd1a41927430a · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
2235 lines (1910 loc) · 94 KB

Overview.bs

File metadata and controls

2235 lines (1910 loc) · 94 KB
Initial: normal
Applies to: multicol containers, flex containers, and grid containers
Inherited: no
Percentages: n/a
Media: visual
Computed value: specified value
Animatable: no
</pre>
Aligns the contents of the box as a whole (as the <a>alignment subject</a>)
within the box itself (as the <a>alignment container</a>):
along the inline/row/main axis of the box (for 'justify-content')
or the block/column/cross axis of the box (for 'align-content').
Values other than <dfn value for="justify-content, align-content">normal</dfn> are defined in [[#alignment-values]], above.
For all layout modes,
the <a>alignment subject</a> and <a>alignment container</a>
both assume the <a>writing mode</a> of the box the '*-content' property is set on.
### Block Containers (Including Table Cells)### {#distribution-block}
<table class="data align-details">
<tr>
<th><a>Alignment Container</a>
<td>
The <a>block container</a>’s content box.
<tr>
<th><a lt="alignment subject">Alignment Subject(s)</a>
<td>
The entire contents of the block, as a unit.
<tr>
<th>'align-content' Axis
<td>
The <a>block axis</a>.
If a <<content-distribution>> is specified
its <a>fallback alignment</a> is used instead.
<tr>
<th>'justify-content' Axis
<td>
Does not apply to and has no effect on <a>block containers</a>.
<tr>
<th>''justify-content/normal'' Behavior
<td>
All values other than ''justify-content/normal'' force the block container to establish a new formatting context.
For table cells, the behavior of the ''justify-content/normal'' depends on the computed value of 'vertical-align':
''vertical-align/top'' makes it behave as ''start'',
''vertical-align/middle'' makes it behave as ''center'',
''vertical-align/bottom'' makes it behave as ''end'',
and all other values make it behave as ''baseline''.
[[!CSS2]]
''justify-content/normal'' otherwise behaves as ''start''.
</table>
### Multicol Containers ### {#distribution-multicol}
<table class="data align-details">
<tr>
<th><a>Alignment Container</a>
<td>
The <a>multi-column element</a>’s content box.
<tr>
<th><a lt="alignment subject">Alignment Subject(s)</a>
<td>
The column boxes,
with any spacing inserted between column boxes
added to the relevant column gaps.
<tr>
<th>'align-content' Axis
<td>
The <a>block axis</a>,
treating the column boxes
(and any column-spanning elements),
as a singular unit.
If a <<content-distribution>> is specified
its <a>fallback alignment</a> is used instead.
<tr>
<th>'justify-content' Axis
<td>
The <a>inline axis</a>.
<tr>
<th>''justify-content/normal'' Behavior
<td>
''justify-content/normal'' behaves as ''justify-content/stretch'';
both are defined as described in the column-sizing rules
of [[!CSS-MULTICOL-1]].
In the case of multi-column elements with a non-''column-width/auto'' 'column-width',
'justify-content' values other than ''justify-content/normal'' or ''justify-content/stretch''
cause the columns to take their specified 'column-width'
rather than stretching to fill the container.
The column boxes are then aligned as specified by 'justify-content'.
</table>
### Flex Containers ### {#distribution-flex}
<table class="data align-details">
<tr>
<th><a>Alignment Container</a>
<td>
The <a>flex container</a>’s content box.
<tr>
<th><a lt="alignment subject">Alignment Subject(s)</a>
<td>
For 'justify-content',
the <a>flex items</a> in each <a>flex line</a>.
For 'align-content',
the <a>flex lines</a>.
Note, this only has an effect on <a>multi-line flex containers</a>.
<tr>
<th>'align-content' Axis
<td>
The <a>cross axis</a>.
<tr>
<th>'justify-content' Axis
<td>
The 'justify-content' property applies along the <a>main axis</a>,
but since stretching in the <a>main axis</a> is controlled by 'flex',
''<content-distribution>/stretch'' behaves as ''flex-start''.
<tr>
<th>''justify-content/normal'' Behavior
<td>
''justify-content/normal'' behaves as ''<content-distribution>/stretch''.
</table>
View remainder of file in raw view