---
title: align-self
slug: Web/CSS/align-self
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Flexible Boxes
  - Layout
  - NeedsExample
  - Referenz
translation_of: Web/CSS/align-self
---
<p>{{CSSRef}}</p>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>align-self</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von {{cssxref("align-items")}}. Falls der Querachsenabstand irgendeines Flexelements auf <code>auto</code> gesetzt ist, wird <code>align-self</code> ignoriert.</p>

<p>{{cssinfo}}</p>

<p>Siehe die <a class="new" href="/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">/* Schlüsselwort Werte */
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch

/* Globale Werte */
align-self: inherit;
align-self: initial;
align-self: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Verwendet den {{cssxref("align-items") }} Wert des Elternelements oder <code>stretch</code>, falls das Element kein Elternelement besitzt.</dd>
 <dt><code>flex-start</code></dt>
 <dd>Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.</dd>
 <dt><code>flex-end</code></dt>
 <dd>Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.</dd>
 <dt><code>center</code></dt>
 <dd>Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.</dd>
 <dt><code>baseline</code></dt>
 <dd>Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.</dd>
 <dt><code>stretch</code></dt>
 <dd>Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile ist übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}</td>
   <td>{{ Spec2('CSS3 Box Alignment') }}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3>

<p>{{Compat("css.properties.align-self.flex_context")}}</p>

<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>

<p>{{Compat("css.properties.align-self.grid_context")}}</p>

<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a class="new" href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
</ul>