--- 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>