8000 csswg-drafts/css-align/Overview.html at a3af69083a44926cc2fbbec8d677dd81b32fafef · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
2277 lines (1727 loc) · 84.6 KB

Overview.html

File metadata and controls

2277 lines (1727 loc) · 84.6 KB
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>specified value
<tr>
<th>Animatable:
<td>no
<tr>
<th>Canonical order:
<td><abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<p> Aligns the contents of the box as a whole along the box's
inline/row/main axis. Values other than ‘<code class=css>auto</code>’
are <a href="#alignment-values">defined above</a>. If both a <a
href="#ltcontent-distribution"><var>&lt;content-distribution></var></a>
and <a href="#ltcontent-position"><var>&lt;content-position></var></a> are
given, the second value represents an explicit <a
href="#fallback-alignment"><i>fallback alignment</i></a>.
<dl>
<dt>Block Containers:
<dd>
<p>The <a href="#alignment-container"><i>alignment container</i></a> is
the <i>block container</i>’s content box. The <a
href="#alignment-subject"><i>alignment subject</i></a> is the entire
contents of the block.
<p>The ‘<a href="#align-content"><code
class=property>align-content</code></a>’ property applies along the
<i>block axis</i>, but if a <a
href="#ltcontent-distribution"><var>&lt;content-distribution></var></a>
is specified the <a href="#fallback-alignment"><i>fallback
alignment</i></a> is used instead. The ‘<a
href="#justify-content"><code
class=property>justify-content</code></a>’ property does not apply to
and has no effect on block containers.
<p>All values other than ‘<code class=css>auto</code>’ force the
block container to establish a new formatting context. For table cells,
the behavior of the ‘<code class=css>auto</code>’ depends on the
computed value of ‘<code class=property>vertical-align</code>’:
‘<code class=css>top</code>’ makes it behave as ‘<a
href="#start"><code class=css>start</code></a>’, ‘<code
class=css>middle</code>’ makes it behave as ‘<a href="#center"><code
class=css>center</code></a>’, ‘<code class=css>bottom</code>’
makes it behave as ‘<a href="#end"><code class=css>end</code></a>’,
and all other values make it behave as ‘<a href="#baseline0"><code
class=css>baseline</code></a>’. ‘<code class=css>auto</code>’
otherwise behaves as ‘<a href="#start"><code
class=css>start</code></a>’.
<dt>Multicol Layout:
<dd>
<p>The <a href="#alignment-container"><i>alignment container</i></a> is
the <i>multi-column element</i>’s content box. The <a
href="#alignment-subject"><i>alignment subject</i></a> is the column
boxes, as a unit.
<p>The ‘<a href="#align-content"><code
class=property>align-content</code></a>’ property applies along the
<i>block axis</i>, but if a <a
href="#ltcontent-distribution"><var>&lt;content-distribution></var></a>
is specified the <a href="#fallback-alignment"><i>fallback
alignment</i></a> is used instead. The ‘<a
href="#justify-content"><code
class=property>justify-content</code></a>’ property does not apply to
and has no effect on multi-column elements.
<p>‘<code class=css>auto</code>’ behaves as ‘<a href="#start"><code
class=css>start</code></a>’.
<dt>Flex Containers:
<dd>
<p>‘<code class=css>auto</code>’ computes to ‘<a
href="#stretch0"><code class=css>stretch</code></a>’.
<p>The <a href="#alignment-container"><i>alignment container</i></a> is
the <i>flex container</i>’s content box. For ‘<a
href="#justify-content"><code
class=property>justify-content</code></a>’, the <a
href="#alignment-subject"><i>alignment subject</i></a> is the <i>flex
items</i> in each <i>flex line</i>; for ‘<a
href="#align-content"><code class=property>align-content</code></a>’,
the <a href="#alignment-subject"><i>alignment subject</i></a> is the
<i>flex lines</i>.
<p>The ‘<a href="#align-content"><code
class=property>align-content</code></a>’ property applies along the
View remainder of file in raw view