blob: 169081934b956e4c7b56d4ec55cad1bc7790ae20 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: align-items
slug: Web/CSS/align-items
tags:
- CSS
- CSS Eigenschaft
- CSS Flexible Boxes
- Layout
- NeedsExample
- Referenz
- Web
translation_of: Web/CSS/align-items
---
<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>align-items</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie {{cssxref("justify-content")}} aus, jedoch in senkrechter Richtung.</p>
<p>{{cssinfo}}</p>
<p>Siehe die <a class="new" href="https://developer.mozilla.org/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">/* Am Kreuzungsstart ausrichten */
align-items: flex-start;
/* Am Kreuzungsende ausrichten */
align-items: flex-end;
/* Elemente um die Kreuzungsachse zentrieren */
align-items: center;
/* Basislinien der Elemente ausrichten */
align-items: baseline;
/* Elemente dehnen, um sie einzupassen */
align-items: stretch;
/* Globale Werte */
align-items: inherit;
align-items: initial;
align-items: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<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 ü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="Beispiele">Beispiele</h2>
<p>{{ TODO() }}</p>
<h2 id="Specifications" name="Specifications">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 Flexbox', '#align-items', 'align-items') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</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-items.flex_context")}}</p>
<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>
<p>{{Compat("css.properties.align-items.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>
<p>[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente <code>align-items: center;</code> gesetzt haben und ihr Inhalt zu groß ist, überfließen sie die Grenzen ihres Containers. Siehe <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> für mehr Informationen.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
</ul>
|
