aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/css/align-self/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
commit4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
treed4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/css/align-self/index.html
parent33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
downloadtranslated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip
initial commit
Diffstat (limited to 'files/de/web/css/align-self/index.html')
-rw-r--r--files/de/web/css/align-self/index.html95
1 files changed, 95 insertions, 0 deletions
diff --git a/files/de/web/css/align-self/index.html b/files/de/web/css/align-self/index.html
new file mode 100644
index 0000000000..6f20312ee8
--- /dev/null
+++ b/files/de/web/css/align-self/index.html
@@ -0,0 +1,95 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>