(0) exportieren Drucken
Alle erweitern

Flexible Box-Layout (Flexbox) in Internet Explorer 10

Hinweis  Dieser Inhalt gilt für CSS-FlexBox in Internet Explorer 10. Eine aktuellere Übersicht über Flexbox finden Sie unter Flexible Box-Layout.

Achtung  Von Internet Explorer 11 wird die Version der Flexbox-Eigenschaften mit Microsoft-spezifischem Präfix ("-ms-") nicht mehr unterstützt. Verwenden Sie stattdessen die Namen ohne Präfix, da dies die bevorzugte Vorgehensweise ist, bei der eine bessere Einhaltung von Standards und zukünftige Kompatibilität gegeben ist. Eine Zusammenfassung der Änderungen und bewährten Methoden finden Sie unter Aktualisierungen für das "Flexbox"-Layout.

Internet Explorer 10 und Windows Store-Apps mit JavaScript in Windows 8 bieten jetzt Support für das CSS-FlexBox-Layout-Modul ("Flexbox"). Das Flexbox-Modul ist zum Zeitpunkt der Dokumenterstellung ein Arbeitsentwurf des World Wide Web Consortium (W3C). (Die Implementierung von Flexbox in Internet Explorer 10 basiert auf der Version vom Donnerstag, 22. März 2012 des Flexbox-Arbeitsentwurfs.) Flexbox ist eine Ergänzung zu den vier grundlegenden Layoutmodi, die in Cascading Stylesheets, Ebene 2 Revision 1 (CSS2.1) definiert sind (und über die display-Eigenschaft aktiviert werden): Blocklayout, Inlinelayout, Tabellenlayout und positioniertes Layout. Das Flexbox-Layout ist für das Gestalten komplexerer Webseiten vorgesehen. Besonders hilfreich ist es dafür, dass die relative Positionierung und Dimensionierung von Elementen konstant bleiben, auch wenn die Größen von Bildschirm und Browserfenster variieren und sich ändern. Flexbox kann die Abhängigkeit von Gleitkommawerten reduzieren, die schwieriger richtig zu positionieren und dimensionieren sind.

Das Flexbox-Layout berücksichtigt den verfügbaren Platz bei der Definition von Feldgrößen und ermöglicht so relative Größen und Positionierung. Sie können beispielsweise sicherstellen, dass zusätzlicher Leerraum in einem Browserfenster gleichzeitig auf die Größe mehrerer untergeordneter Elemente verteilt wird und dass die untergeordneten Elemente in der Mitte des enthaltenden Blocks zentriert sind.

Mit dem Flexbox-Layout können Sie die folgenden Aktionen ausführen:

  • Ein flüssiges Layout gestalten — auch wenn verschiedene Bildschirm- und Browserfenstergrößen verwendet werden —, aber Elemente enthalten sind (wie etwa Bilder oder Steuerelemente), die ihre Position und Größe in Relation zueinander beibehalten.
  • Festlegen, wie überschüssiger Platz entlang der Layoutachse (horizontal oder vertikal) einer Reihe von Elementen zugeordnet werden kann, um bestimmte Elemente zu vergrößern.
  • Festlegen, wie überschüssiger Platz entlang der Layoutachse einer Reihe von Elementen so zugeordnet werden kann, dass er vor, nach oder zwischen die Reihe der Elemente fällt.
  • Festlegen, wie überschüssiger Platz im rechten Winkel zur Layoutachse eines Elements um ein Element herum angeordnet werden kann, beispielsweise zusätzlicher Platz oberhalb oder unterhalb von Schaltflächen, die nebeneinander angeordnet sind.
  • Die Richtung steuern, in der Elemente auf der Seite angeordnet sind — beispielsweise von oben nach unten, von links nach rechts, von rechts nach links oder von unten nach oben.
  • Elemente in einer anderen als der vom Dokumentobjektmodell (DOM) festgelegten Reihenfolge neu auf dem Bildschirm anordnen.

Flexbox-Container

Zum Aktivieren des Flexbox-Layouts müssen Sie zunächst einen Flexbox-Container erstellen. Legen Sie dazu die display-Eigenschaft eines Elements entweder auf "-ms-flexbox" (bei einem Flexbox-Container auf Blockebene ) oder auf "-ms-inline-flexbox" (bei einem Inline-Flexbox-Container) fest. (Da der Entwurf des CSS-Flexbox-Layout-Moduls noch vorläufig ist, müssen dieser Wert und alle Eigenschaften in diesem Abschnitt mit dem Anbieterpräfix "-ms-" für Microsoft verwendet werden, damit sie mit Internet Explorer 10 und Windows Store-Apps mit JavaScript unter Windows 8 funktionieren.) Im folgenden Codebeispiel wird ein Flexbox-Container auf Blockebene in einem Element mit der ID "myFlexbox" erstellt:


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  background: gray;
  border: blue;
}
</style>


Festlegen der Flexbox-Ausrichtung

Sie können beim Erstellen eines Flexbox-Containers auch dessen Ausrichtung festlegen — Sie können also angeben, ob die untergeordneten Elemente von rechts nach links, von links nach rechts, von oben nach unten oder von unten nach oben dargestellt werden. Dazu verwenden Sie die folgende Eigenschaft:

EigenschaftBeschreibung

-ms-flex-direction

Gibt die Ausrichtung im Layout für alle untergeordneten Elemente des Objekts an.

Mögliche Werte für diese Eigenschaft sind die folgenden Schlüsselwörter:

row

Dies ist der Anfangswert. Die untergeordneten Elemente werden in derselben Reihenfolge angezeigt, in der sie im Quelldokument deklariert wurden, und zwar von links nach rechts.

Beispiel für "-ms-box-orient:horizontal"
column

Die untergeordneten Elemente werden in derselben Reihenfolge angezeigt, in der sie im Quelldokument deklariert wurden, aber von oben nach unten.

Beispiel für "-ms-box-orient:vertical"
row-reverse

Die untergeordneten Elemente werden in derselben Reihenfolge angezeigt, in der sie im Quelldokument deklariert wurden, aber von rechts nach links.

Beispiel für "-ms-box-direction:normal"
column-reverse

Die untergeordneten Elemente werden in derselben Reihenfolge angezeigt, in der sie im Quelldokument deklariert wurden, aber von unten nach oben.

inherit

Die untergeordneten Elemente werden in der Reihenfolge angezeigt, in der der Wert dieser Eigenschaft für das übergeordnete Element berechnet wird.

 

Die folgende ID-Auswahl hat beispielsweise die -ms-flex-direction-Eigenschaft hinzugefügt und auf row festgelegt:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-direction: row;
  background: grey;
  border: blue;
}
</style>


Festlegen der Flexbox-Ausrichtung im rechten Winkel zur Layoutachse

Wenn Sie einen Flexbox-Container erstellen, können Sie auch dessen Ausrichtung festlegen — Sie können also angeben, in welcher Richtung die untergeordneten Elemente angezeigt werden. Die Anzeige erfolgt jedoch immer im rechten Winkel zur Layoutachse, die durch die -ms-flex-direction-Eigenschaft definiert ist.

EigenschaftBeschreibung

-ms-flex-align

Gibt die Ausrichtung (im rechten Winkel zu der durch die -ms-flex-direction-Eigenschaft definierten Layoutachse) von untergeordneten Elementen des Objekts an.

Mögliche Werte dieser Eigenschaft sind die folgenden Schlüsselwörter. Beachten Sie dabei jedoch, dass dies vom writing-mode abhängige Schlüsselwörter sind. Sowohl die vordere Kante vom übergeordnetem Element und von den untergeordneten Elementen als auch die hintere Kante der untergeordneten Elemente hängen von der Layoutausrichtung ab. Bei einer Layoutausrichtung von links nach rechts bildet z. B. die vordere Kante den oberen Rand des übergeordneten Elements, beim Layout von oben nach unten ist sie der linke Rand des übergeordneten Elements usw. Entsprechend ist bei einer Layoutausrichtung von links nach rechts der untere Rand von untergeordneten Elementen die hintere Kante, bei einer Ausrichtung von oben nach unten der rechte Rand usw.

start

Wenn beim übergeordneten Element für -ms-flex-direction der Wert row oder column berechnet wird, wird die vordere Kante (oder Grundlinie) aller untergeordneten Elemente an der vorderen Kante des Objekts ausgerichtet. Der verbleibende Platz wird im rechten Winkel zur Layoutachse hinter der hinteren Kante der untergeordneten Elemente platziert.

Wenn beim übergeordneten Element für -ms-flex-direction der Wert row-reverse oder column-reverse berechnet wird, wird die hintere Kante (oder Grundlinie) aller untergeordneten Elemente an der hinteren Kante des Objekts ausgerichtet. Der verbleibende Platz wird im rechten Winkel zur Layoutachse vor der vorderen Kante der untergeordneten Elemente platziert.

Beispiel für "-ms-box-align:before"
end

Wenn beim übergeordneten Element für -ms-flex-direction der Wert row oder column berechnet wird, wird die vordere Kante aller untergeordneten Elemente an der hinteren Kante des Objekts ausgerichtet. Der verbleibende Platz wird im rechten Winkel zur Layoutachse hinter der hinteren Kante der untergeordneten Elemente platziert.

Wenn beim übergeordneten Element für -ms-flex-direction der Wert row-reverse oder column-reverseberechnet wird, wird die vordere Kante aller untergeordneten Elemente an der vorderen Kante des Objekts ausgerichtet. Der verbleibende Platz wird im rechten Winkel zur Layoutachse hinter der hinteren Kante der untergeordneten Elemente platziert.

Beispiel für "-ms-box-align:after"
center

Alle untergeordneten Elemente werden zwischen vorderer und hinterer Kante zentriert. Der verbleibende Platz wird im rechten Winkel zur Layoutachse gleichmäßig vor und hinter den untergeordneten Elementen aufgeteilt.

Beispiel für "-ms-box-align:middle"
stretch

Dies ist der Anfangswert. Jedes untergeordnete Element wird gestreckt, um den im rechten Winkel zur Layoutachse verfügbaren Platz vollständig auszufüllen. Wenn die max-width-Eigenschaft oder die max-height-Eigenschaft eines untergeordneten Elements festgelegt wurden, haben diese Vorrang, und das Layout folgt der start-Regel.

Beispiel für "-ms-box-align:stretch"
baseline

Die Grundlinien (je nach -ms-flex-direction-Eigenschaft die vordere oder hintere Kante) aller untergeordneten Elemente werden aneinander ausgerichtet.

Das untergeordnete Element, das im rechten Winkel zur Layoutachse den meisten Platz einnimmt, folgt der start-Regel. Die Grundlinien aller verbleibenden Elemente werden dann an der Grundlinie dieses Elements ausgerichtet.

Beispiel für "-ms-box-align:baseline"

 

Die folgende ID-Auswahl hat beispielsweise die -ms-flex-align-Eigenschaft hinzugefügt und auf start festgelegt:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-align: start;
  background: grey;
  border: blue;
}
</style>


Verteilen des Leerraums auf untergeordnete Elemente einer Flexbox

Sie können die Verteilung des Leerraums unter den untergeordneten Elementen der Flexbox mit der folgenden Eigenschaft festlegen:

EigenschaftBeschreibung

-ms-flex-pack

Gibt an, wie überschüssiger Platz auf die untergeordneten Elemente des Objekts verteilt wird (entlang der durch die -ms-flex-direction-Eigenschaft definierten Achse).

Mögliche Werte dieser Eigenschaft sind die folgenden Schlüsselwörter. Beachten Sie, dass diese Schlüsselwörter vom writing-mode abhängen. Die vordere und hintere Kante des übergeordneten Elements und der untergeordneten Elemente hängen von der Layoutausrichtung ab. Bei einem Layout von links nach rechts beispielsweise ist die linke Kante des übergeordneten Elements die vordere Kante. Bei einem Layout von oben nach unten ist die obere Kante die vordere Kante usw. Entsprechend ist in einem Layout von links nach rechts die rechte Kante eines untergeordneten Elements die hintere Kante, in einem Layout von oben nach unten ist die untere Kante die hintere Kante usw.

start

Dies ist der Anfangswert. Die vordere Kante des ersten untergeordneten Elements wird am Anfang des übergeordneten Elements platziert, die vordere Kante des nächsten untergeordneten Elements wird in Richtung der Layoutachse an der hinteren Kante des ersten untergeordneten Elements ausgerichtet usw. Der gesamte übrige freie Platz entlang der Layoutachse wird an deren Ende angeordnet.

Beispiel für "-ms-box-pack:start"
end

Die hintere Kante des ersten untergeordneten Elements wird am Ende des übergeordneten Elements platziert. Die hintere Kante des nächsten untergeordneten Elements wird an der hinteren Kante des ersten untergeordneten Elements entlang der Layoutachse ausgerichtet. Der gesamte übrige freie Platz entlang der Layoutachse wird an deren Anfang angeordnet.

Beispiel für "-ms-box-pack:end"
center

Alle untergeordneten Elemente werden anhand ihrer Kanten aneinander ausgerichtet, wie für die Schlüsselwörter start oder end beschrieben. Allerdings wird die Gruppe der untergeordneten Elemente zwischen der vorderen und der hinteren Kante des übergeordneten Elements zentriert, sodass der gesamte freie Platz gleichmäßig vor dem ersten und nach dem letzten untergeordneten Element verteilt wird.

Beispiel für "-ms-box-pack:center"
justify

Die vordere Kante des ersten untergeordneten Elements wird am Anfang des übergeordneten Elements platziert. Die hintere Kante des letzten untergeordneten Elements wird an der hinteren Kante der übergeordneten Flexbox ausgerichtet, und alle übrigen untergeordneten Elemente werden so zwischen dem ersten und dem letzten untergeordneten Element angeordnet, dass der entlang der Layoutachse verbleibende freie Platz gleichmäßig zwischen den untergeordneten Elementen verteilt wird.

Beispiel für "-ms-box-pack:justify"

 

Die folgende ID-Auswahl hat beispielsweise die -ms-flex-pack-Eigenschaft hinzugefügt und auf "justify" festgelegt:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  background: grey;
  border: blue;
}
</style>


Aktivieren des Umbruchs untergeordneter Elemente

Sie können festlegen, dass überlaufende untergeordnete Elemente in einer Flexbox, auf die nächste Zeile umbrochen werden, und die die Leserichtung bestimmen. Verwenden Sie dazu die folgende Eigenschaft:

EigenschaftBeschreibung

-ms-flex-wrap

Gibt an, ob untergeordnete Elemente je nach verfügbarem Platz im Objekt auf mehrere Zeilen oder Spalten umgebrochen werden.

Mögliche Werte dieser Eigenschaft sind die folgenden Schlüsselwörter:

none

Dies ist der Anfangswert. Alle untergeordneten Elemente werden auf einer Zeile oder in einer Spalte angezeigt. Die overflow-Eigenschaft des Objekts gibt an, ob die untergeordneten Elemente ausgeblendet oder abgeschnitten werden oder bildlauffähig sind.

wrap

Die untergeordneten Elemente werden umgebrochen und in aufeinanderfolgenden, parallelen Zeilen oder Spalten angezeigt. Die Höhe oder Breite des Objekts wird im rechten Winkel zu der durch die writing-mode-Eigenschaft definierten Layoutachse erweitert, um die zusätzlichen Zeilen oder Spalten aufzunehmen.

Beispiel für "-ms-box-line-progression:normal"
wrap-reverse

Die untergeordneten Elemente werden umgebrochen und in umgekehrter Reihenfolge in aufeinanderfolgenden, parallelen Zeilen oder Spalten angezeigt. Die Höhe oder Breite des Objekts wird im rechten Winkel zu der durch die writing-mode-Eigenschaft definierten Layoutachse erweitert, um die zusätzlichen Zeilen oder Spalten aufzunehmen.

Beispiel für "-ms-box-line-progression:reverse"

 

Beachten Sie, dass Internet Explorer 10 versucht, die untergeordneten Elemente einer übergeordneten Flexbox in möglichst wenige Zeilen einzupassen, indem alle Boxen auf ihre Mindestgröße reduziert werden. Wenn ein Element nicht in die entsprechende Zeile passt, wird es am Ende der Zeile abgeschnitten.

Standardmäßig werden zusätzliche Zeilen hinzugefügt, um die Blockrichtung beizubehalten. In Layouts von links nach rechts und von rechts nach links werden neue Zeilen unterhalb der vorhandenen Zeilen hinzugefügt (es sei denn, an anderer Stelle wurde explizit eine Blockrichtung von oben nach unten definiert). Ob in einem vertikalen Layout neue Zeilen rechts oder links angezeigt werden, hängt ebenfalls von der Blockrichtung ab, die abhängig von der Schreibrichtung oder anderen speziellen Einstellungen von links nach rechts oder von rechts nach links verlaufen kann.

Die folgende ID-Auswahl hat beispielsweise die -ms-flex-wrap-Eigenschaft hinzugefügt und auf wrap festgelegt:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  background: grey;
  border: blue;
}
</style>


Hinzufügen von untergeordneten Elementen zu einer Flexbox

Nachdem Sie nun einen Flexbox-Container erstellt haben, können Sie diesem untergeordnete Elemente hinzufügen. Um dem Flexbox-Container ein untergeordnetes Element hinzuzufügen, ordnen Sie dieses unmittelbar unter dem Flexbox-Element an, wie im folgenden Markup gezeigt:


<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>


Festlegen der Flexibilität eines untergeordneten Elements

Sie können steuern, in welchem Verhältnis überschüssiger Platz entlang der Layoutachse einer übergeordneten Flexbox auf die untergeordneten Elemente verteilt wird. Mit der -ms-flex-Eigenschaft können Sie Flexbox-Elemente "flexibel" machen, also ihre Höhe und Breite an den verfügbaren Platz anpassen. Eine Flexbox teilt den verfügbaren Platz auf die enthaltenen Elemente proportional zu ihrer positiven Flexibilität auf. Wenn ein Überlaufen droht, werden die Elemente gemäß ihrer negativen Flexibilität verkleinert.

Wenn das Element mit der -ms-flex-Eigenschaft ein Flexbox-Element ist, wird die -ms-flex-Eigenschaft anstelle der width-Eigenschaft oder height-Eigenschaft herangezogen, um die Größe des Elements zu bestimmen. (Ist das Element keine Flexbox, hat die -ms-flex-Eigenschaft keine Auswirkungen.)

EigenschaftBeschreibung

-ms-flex

Gibt an, ob die Höhe und Breite der untergeordneten Elemente je nach verfügbarem Platz im Objekt flexibel ist. Dieser Wert gibt auch das den Anteil des verfügbaren Platzes an, der dem untergeordneten Element zugeordnet wird. Die Syntax lautet wie folgt:


-ms-flex: <positive-flex> <negative-flex> <preferred-size>

Diese Eigenschaft kann auf einen der folgenden Werte oder auf none festgelegt werden.

<positive-flex>

Ein ganzzahliger Wert, der eine positive Flexibilität angibt. Wird kein Wert angegeben, lautet die positive Flexibilität "1". Negative Werte sind nicht zulässig.

<negative-flex>

Ein ganzzahliger Wert, der eine negative Flexibilität angibt. Wird kein Wert angegeben, lautet die negative Flexibilität "0". Negative Werte sind nicht zulässig.

<preferred-size>

Legt die bevorzugte Größe für ein Flexbox-Element fest. Möglich sind alle für die width-Eigenschaft oder height-Eigenschaft gültigen Werte mit Ausnahme von inherit. Wird kein Wert angegeben, wird als Größe "0px" festgelegt. Wenn die <preferred-size>-Komponente eines untergeordneten Elements in einer Flexbox auto ist, wird die bevorzugte Größe auf den Wert der width-Eigenschaft oder height-Eigenschaft des Flexbox-Elements (je nachdem, welche parallel zur Hauptachse verläuft) festgelegt.

none

Dies ist der Anfangswert. Entspricht der Festlegung von -ms-flex auf "0 0 auto".

 

Gruppieren von untergeordneten Elementen einer Flexbox

Sie können die untergeordneten Elemente einer Flexbox mithilfe einer Gruppennummer gruppieren, um damit die Reihenfolge zu steuern, in der die Elemente entlang der Layoutachse dargestellt werden, auch wenn sich diese Reihenfolge von der DOM-Reihenfolge unterscheidet. Verwenden Sie zum Festlegen der Gruppierung die folgende Eigenschaft:

EigenschaftBeschreibung

-ms-flex-order

Gibt die Ordnungsgruppe an, zu der ein Flexbox-Element gehört. Dieser ganzzahlige Wert gibt die Anzeigereihenfolge (entlang der durch die -ms-flex-direction-Eigenschaft definierten Achse) für die Gruppe an.

Zulässige Werte sind ganze Zahlen, die größer als null sind. Der Anfangswert für diese Eigenschaft ist "0".

 

Mit der -ms-flex-order-Eigenschaft können Sie Elemente in Ordnungsgruppen zusammenfassen. Die erste Ordnungsgruppe hat die Nummer 0. Alle untergeordneten Elemente in jeder Ordnungsgruppe werden entlang der angegebenen Layoutachse gerendert, bevor untergeordnete Elemente in der nächsten Ordnungsgruppe gerendert werden. Daher werden alle untergeordneten Elemente in Ordnungsgruppe 0 gerendert, bevor untergeordnete Elemente in Ordnungsgruppe 1 gerendert werden, usw. Innerhalb von Ordnungsgruppen werden Elemente in der DOM-Reihenfolge gerendert. Standardmäßig werden zusätzliche Zeilen entsprechend der Blockrichtung hinzugefügt.

Das folgende Markup definiert z. B. vier untergeordnete Elemente und weist den meisten davon über die -ms-flex-order-Eigenschaft eine Ordnungsgruppe zu:


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>


Sowohl child2 als auch child4 gehören zur Ordnungsgruppe 0, während child1 und child3 in Ordnungsgruppe 1 sind. Da die untergeordneten Elemente innerhalb der einzelnen Ordnungsgruppen gemäß ihrer DOM-Reihenfolge gerendert werden, werden sie im übergeordneten Flexbox-Element in der folgenden Reihenfolge angezeigt: child2, child4, child1, child3. Dies ist im folgenden Screenshot zu erkennen.

Screenshot des obigen Beispiels in einem Browserfenster

Sie können diese Seite anzeigen. (Zum richtigen Anzeigen dieser Seite ist Internet Explorer 10 erforderlich.)

Verwandte Themen

Flexible Box-Layout

 

 

Anzeigen:
© 2014 Microsoft