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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
|
---
title: align-content
slug: Web/CSS/align-content
tags:
- CSS
- CSS Eigenschaft
- CSS Flexible Boxes
- Layout
- Referenz
translation_of: Web/CSS/align-content
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>align-content</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht.</p>
<p>Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.</p>
<div>{{cssinfo}}</div>
<p>Siehe die <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Verwendung von flexiblen Boxen</a> für mehr Informationen.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css">/* Packe Zeilen an den Start der Querachse */
align-content: flex-start;
/* Packe Zeilen an das Ende der Querachse */
align-content: flex-end;
/* Packe Zeilen um die Mitte der Querachse */
align-content: center;
/* Verteile Zeilen entlang der Querachse, Start und Ende */
align-content: space-between;
/* Verteile Zeilen gleichmäßig entlang der Querachse */
align-content: space-around;
/* Strecke Zeilen, um die gesamte Querachse auszufüllen */
align-content: stretch;
/* Globale Werte */
align-content: inherit;
align-content: initial;
align-content: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code>flex-start</code></dt>
<dd>Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.</dd>
<dt><code>flex-end</code></dt>
<dd>Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.</dd>
<dt><code>center</code></dt>
<dd>Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.</dd>
<dt><code>space-between</code></dt>
<dd>Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.</dd>
<dt><code>space-around</code></dt>
<dd>Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.</dd>
<dt><code>stretch</code></dt>
<dd>Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<p><strong>HTML:</strong></p>
<pre class="brush: html"><div id="container">
<p>align-content: flex-start</p>
<div id="flex-start">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>align-content: center</p>
<div id="center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>align-content: flex-end</p>
<div id="flex-end">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>align-content: space-between</p>
<div id="space-between">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>align-content: space-around</p>
<div id="space-around">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>align-content: stretch</p>
<div id="stretch">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div></pre>
<p><strong>CSS:</strong></p>
<pre class="brush: css">#container > div {
display: flex;
flex-flow: row wrap;
width: 140px;
height: 140px;
background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
}
#container > div > div {
margin: 2px;
width: 30px;
min-height: 30px;
background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
#flex-start {
align-content: flex-start;
}
#center {
align-content: center;
}
#flex-end {
align-content: flex-end;
}
#space-between {
align-content: space-between;
}
#space-around {
align-content: space-around;
}
#stretch {
align-content: stretch;
}</pre>
<p>Ergibt:</p>
<p>{{ EmbedLiveSample('Beispiele', 600, 550) }}</p>
<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 Flexbox', '#align-content', 'align-content')}}</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-content.flex_context")}}</p>
<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>
<p>{{Compat("css.properties.align-content.grid_context")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwenden von CSS Flexible Boxes</a></li>
</ul>
<div>{{CSSRef}}</div>
|
