blob: 7b3a099ded30a8b2a161ca9c5a1590e5e21a3148 (
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
|
---
title: order
slug: Web/CSS/order
tags:
- CSS
- CSS Eigenschaft
- CSS Flexible Boxes
- Layout
- NeedsLiveSample
- Referenz
- Web
translation_of: Web/CSS/order
---
<div>{{ CSSRef("CSS Flexible Boxes") }}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>order</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die Reihenfolge an, in der Flexelemente innerhalb ihres Flexcontainers dargestellt werden. Elemente werden in aufsteigender Reihenfolge des <code>order</code> Werts dargestellt. Elemente mit dem gleichen <code>order</code> Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.</p>
<div class="note">
<p><strong>Hinweis:</strong> <code>order</code> beeinflusst nur die visuelle Reihenfolge von Elementen und nicht deren logische oder Tab-Reihenfolge. <code>order</code> darf nicht bei nicht visuellen Medien wie Sprache verwendet werden.</p>
</div>
<p>{{cssinfo}}</p>
<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Verwendung von flexiblen Boxen</a> für mehr Informationen.</p>
<p>{{ Note("<code>order</code> ist nur dazu gedacht, die visuelle Reihenfolge festzulegen, nicht die logische Reihenfolge der Elemente. Die Eigenschaft darf nicht auf nicht-visuelle Medien wie beispielsweise Sprache angewendet werden.") }}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="brush:css">/* Nummerische Werte inklusive negativer Zahlen */
order: 5;
order: -5;
/* Globale Werte */
order: inherit;
order: initial;
order: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><integer></code></dt>
<dd>Repräsentiert die ordinale Position des Flexelements.</dd>
</dl>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele" name="Beispiele">Beispiele</h2>
<p>Einfache HTML-Struktur:</p>
<pre class="brush:html;"><!DOCTYPE html>
<header>…</header>
<div id='main'>
<article>…</article>
<nav>…</nav>
<aside>…</aside>
</div>
<footer>…</footer></pre>
<p>Der folgende CSS Code erzeugt ein klassisches Layout mit zwei Seitenleisten, die einen Inhaltsbereich umschließen. Das Flexible Box Layout Modul erzeugt automatisch Blöcke gleicher vertikaler Größe und verwendet gesamten zur Verfügung stehenden horizontalen Platz.</p>
<pre class="brush:css;">#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }</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 Flexbox', '#order-property', 'order') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.properties.order")}}
<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>Firefox verändert aktuell fälschlicherweise die Tab-Reihenfolge der Elemente. Siehe {{bug("812687")}}.</p>
<p>[2] Im Internet Explorer 10 wird ein flexibler Container durch <code>display:-ms-flexbox</code> angegeben, nicht durch <code>display:flex</code>.</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">Verwenden von CSS Flexible Boxes</a></li>
</ul>
|
