Flexible Box-Layout

Flexible Box-Layout (Flexbox) ist eine Ergänzung zu den vier grundlegenden Layoutmodi, die in Cascading Stylesheets, Ebene 2 Revision 1 (CSS2.1) definiert sind: Blocklayout, Inlinelayout, Tabellenlayout und positioniertes Layout. Mit dem Flexbox-Layout können Sie komplexe Webseiten einfacher layouten und die relative Position und Größe von Elementen an geänderte Größen von Bildschirm und Browserfenster anpassen. Flexbox kann die Abhängigkeit von Gleitkommawerten und tabellenbasierten Layouts reduzieren, deren ordnungsgemäße Positionierung und Dimensionierung schwieriger ist.

Flexbox-Layout vereinfacht Folgendes:

  • 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.
  • Angeben, wie überschüssiger Platz entlang der horizontalen oder vertikalen Layoutachsen einer Reihe von Elementen erneut zugeordnet werden kann, um bestimmte Elemente zu vergrößern.
  • Angeben, wie überschüssiger Platz entlang der Layoutachse einer Reihe von Elementen so erneut zugeordnet werden kann, dass er vor, nach oder zwischen die Reihe der Elemente fällt.
  • Angeben, wie überschüssiger Platz im rechten Winkel zur Layoutachse eines Elements in den Bereich um das Element herum verschoben werden kann – beispielsweise zusätzlicher Platz oberhalb oder unterhalb von Schaltflächen, die nebeneinander angeordnet sind.
  • Steuern der visuellen Richtung von Elementen, die auf der Seite angeordnet sind – beispielsweise von oben nach unten, von links nach rechts, von rechts nach links oder von unten nach oben –, ohne den angegebenen writing-mode zu ändern.
  • Neuanordnen der Elemente auf dem Bildschirm in einer anderen als der vom Dokumentobjektmodell (Document Object Model, DOM) angegebenen Reihenfolge.

In diesem Beispiel wird die Verwendung von Flexbox zum Erstellen eines klassischen Seitenlayouts mit drei Spalten für breitere Bildschirme gezeigt, das für schmalere Displays in ein Layout mit einer Spalte komprimiert wird.

Codebeispiel: http://samples.msdn.microsoft.com/workshop/samples/css/flexbox/flexbox.html

Flexbox-Container und flexible Elemente

Zum Aktivieren eines Flexbox-Layouts müssen Sie zunächst einen flexiblen Container erstellen. Ein flexibler Container bildet einen umgebenden Block für dessen Inhalte (flexible Elemente). Zum Erstellen eines flexiblen Containers wenden Sie display auf ein Element an und legen es auf flex oder inline-flex fest:

display: flex | inline-flex

Wenn Sie display auf flex festlegen, verhält sich ein Element wie ein flexibles Containerfeld auf Blockebene. Ein flexibler Container auf Blockebene nimmt die gesamte verfügbare Breite im übergeordneten Container ein. Durch Festlegen von display auf inline-flex verhält sich ein Element wie ein flexibles Containerfeld auf Inlineebene, das nur den benötigten Platz einnimmt und keine neuen Zeilen erzwingt.

Im Hinblick auf andere Elemente außerhalb des flexiblen Containers verhalten sich flexible Container auf Inlineebene ähnlich wie Bilder. Flexible Container auf Blockebene verhalten sich ähnlich wie ein normales div-Element.

Ein flexibler Container kann null oder mehr flexible Elemente enthalten. Jedes untergeordnete Element des flexiblen Containers wird zu einem flexiblen Element. Text, der sich direkt innerhalb des flexiblen Containers befindet, wird in einem anonymen flexiblen Element umgebrochen. Wenn das anonyme flexible Element jedoch nur Leerzeichen enthält, wird es nicht gerendert und ist vergleichbar mit der Festlegung auf "display: none". Den flexiblen Container und die darin enthaltenen flexiblen Elemente können Sie mit den Eigenschaften flex, flex-basis, flex-grow, flex-shrink, flex-flow, flex-direction, flex-wrap, align-items, align-self, align-content, justify-content und order bearbeiten.

Festlegen von Ausrichtung, Umbruch und Reihenfolge für die Flexbox

Beim Erstellen eines flexiblen Containers können Sie die Ausrichtung aller untergeordneten Elemente innerhalb des Containers angeben. Mit der flex-direction-Eigenschaft wird die Richtung für die Hauptachse des flexiblen Containers bzw. die primäre Achse festgelegt, entlang der die flexiblen Elemente angeordnet werden. Mithilfe der flex-direction-Eigenschaft können Sie angeben, ob die untergeordneten Elemente von rechts nach links, links nach rechts, oben nach unten oder unten nach oben angezeigt werden.

Außerdem können Sie angeben, wie die flexiblen Elemente umgebrochen werden sollen, wenn die Größe des flexiblen Containers geändert wird. Die flex-wrap-Eigenschaft gibt an, ob untergeordnete Elemente auf eine oder mehrere Zeilen bzw. Spalten umgebrochen werden.

Manchmal ist es einfacher, sowohl flex-direction als auch flex-wrap mithilfe der flex-flow-Kompakteigenschaft festzulegen. Mit diesen beiden Untereigenschaften zusammen werden die Haupt- und Querachse für den flexiblen Container festgelegt.

flex-flow: <flex-direction> || <flex-wrap>

Bei Bedarf können mit der order-Eigenschaft flexible Elemente visuell neu angeordnet werden. Standardmäßig werden flexible Elemente in einem flexiblen Container in der gleichen Reihenfolge wie im Quelldokument angezeigt, es sei denn, dies wird mit dieser Eigenschaft geändert.


#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  order: 2;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  order: 3;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  order: 1;
}


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

Im obigen CSS-Codeausschnitt wird mit dem ersten Eigenschaftsunterwert, row, in der flex-flow-Kompakteigenschaft als Hauptachse des flexiblen Containers dieselbe Ausrichtung wie für die Inlineachse des aktuellen Schreibmodus festgelegt. In diesem Beispiel verläuft der Schreibmodus horizontal von links nach rechts und von oben nach unten (Standardeinstellung). Mit dem zweiten Eigenschaftsunterwert, wrap, in der obigen flex-flow-Kompakteigenschaft wird definiert, dass flexible Elemente umgebrochen und in aufeinanderfolgenden, parallelen Zeilen angezeigt werden. In diesem Beispiel wird die Höhe des flexiblen Containers im rechten Winkel zu der durch die writing-mode-Eigenschaft definierten Achse erweitert, um die zusätzlichen Zeilen aufzunehmen, wenn die Größe des flexiblen Containers geändert wird.

HTML-Elemente mit Verwendung einer Flexbox

Wenn die Größe des flexiblen Containers reduziert wird, werden die flexiblen Elemente in separaten Zeilen angezeigt, und zwar gemäß der Definition für die abgebildete flex-flow-Eigenschaft. Die order-Eigenschaft wird außerdem dazu verwendet, die flexiblen Elemente nicht in derselben Reihenfolge wie im Quelldokument angegeben anzuzeigen.

Festlegen der Flexbox-Ausrichtung im rechten Winkel zur Layoutachse

Sie können auch die Ausrichtung der Inhalte des flexiblen Containers entlang der Hauptachse und der Querachse (im rechten Winkel zur Hauptachse) angeben, nachdem alle flexiblen Längen und automatischen Ränder aufgelöst wurden. Mit den Eigenschaften justify-content, align-items, align-self und align-content können Sie diese Ausrichtung anpassen.

Mithilfe der justify-content-Eigenschaft können Sie festlegen, wie flexible Elemente entlang der Hauptachse des flexiblen Containers ausgerichtet werden, nachdem alle flexiblen Längen und automatischen Ränder aufgelöst wurden. Die folgende Abbildung zeigt die Werte für justify-content sowie deren Auswirkungen auf einen flexiblen Container mit drei flexiblen Elementen.

Abbildung zur Veranschaulichung der Werte für "justify-content"

Für die weitere Anpassung der Ausrichtung können Sie auch die Ausrichtung der Querachse des flexiblen Containers mithilfe der align-items-Eigenschaft anpassen. Bei der Querachse handelt es sich um die Achse im rechten Winkel zur Hauptachse. Die folgende Abbildung zeigt die Werte für align-items sowie deren Auswirkungen auf einen flexiblen Container mit drei flexiblen Elementen.

Den allen flexiblen Elementen in align-items zugewiesenen Wert können Sie auch überschreiben, indem Sie die align-self-Eigenschaft für ein flexibles Element angeben. Mit Align-self wird der Ausrichtungswert (im rechten Winkel zu der durch die flex-direction-Eigenschaft definierten Layoutachse) der flexiblen Elemente festgelegt. Der Anfangswert ist auto, womit die align-self-Eigenschaft standardmäßig mit der align-items-Eigenschaft des übergeordneten Elements identisch ist. Für die align-items-Eigenschaft werden dieselben Werte (und zusätzlich auto) als align-items verwendet. in der obigen Abbildung sind diese Werte und deren Auswirkungen dargestellt.

Abbildung zur Veranschaulichung der Werte für "align-properties"

Die Ausrichtung können Sie mit der align-content-Eigenschaft weiter anpassen, die mit der justify-content-Eigenschaft vergleichbar ist. Die align-content-Eigenschaft ist jedoch nur wirksam, wenn das Flexbox-Element mehrere Zeilen aufweist. Mit der align-content-Eigenschaft werden die Zeilen des flexiblen Containers im flexiblen Container in Abhängigkeit vom freien Platz auf der Querachse ausgerichtet. Die folgende Abbildung zeigt die Werte für align-content sowie deren Auswirkungen auf einen flexiblen Container mit drei flexiblen Elementen.

Abbildung zur Veranschaulichung der Werte für   "align-items  " und   "align-content  "

Festlegen der Flexibilität

Bei Bedarf können Sie die Breiten und Höhen von flexiblen Elementen ändern, um den im flexiblen Container verfügbaren Platz zu füllen. Dafür können Sie die flex-Kompakteigenschaft verwenden. Vom flexiblen Container wird freier Platz für die Elemente proportional zu ihrem flexiblen Wachstumsfaktor verteilt bzw. proportional zu ihrem flexiblen Schrumpfungsfaktor verkleinert, um ein Überlaufen zu verhindern.

Die Kompakteigenschaft, flex, wird mithilfe der folgenden drei Untereigenschaften definiert: flex-grow, flex-shrink und flex-basis.

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]

#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  flex: 1 1 auto;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}


<div id="flexContainer">
   <div id="item1">flex item 1</div>
   <div id="item2">flex item 2</div>
   <div id="item3">flex item 3</div>
</div>

Im obigen Beispiel entspricht der erste Unterwert in der flex-Kompakteigenschaft der flex-grow-Eigenschaft. Mit dieser Eigenschaft wird der flexible Wachstumsfaktor gesteuert, bzw. wie das flexible Element relativ zu anderen Elementen im flexiblen Container anwächst. Der zweite Unterwert entspricht der flex-shrink-Eigenschaft. Mit dieser Eigenschaft wird gesteuert, wie das flexible Element relativ zu anderen Elementen im flexiblen Container schrumpft. Der dritte Unterwert entspricht der flex-basis-Eigenschaft. Mit dieser Eigenschaft wird die anfängliche Hauptgröße des flexiblen Elements angegeben, bevor der freie Platz verteilt wird. Die anfängliche Hauptgröße ist die Breite oder Höhe des flexiblen Elements entlang der Hauptachse (Primärachse). Der Anfangswert lautet "auto". Damit wird der Wert für die Hauptgröße des flexiblen Containers abgerufen.

In diesem Beispiel sind die flexiblen Elemente vollständig flexibel und absorbieren den gesamten freien Platz, der auf der Hauptachse verfügbar ist.

API-Referenz

Flexible Box ("Flexbox") Layout

Beispiele und Lernprogramme

Beispiel für CSS-Flexbox
Entwickeln von adaptiven Websites

Demos für die Internet Explorer-Testversion

So geht's: CSS3-Flexbox-Layout

IEBlog-Beiträge

IE10 Platform Preview und CSS-Features für adaptive Layouts

Spezifikation

W3C CSS-Modul für Flexible Box-Layout

 

 

Anzeigen:
© 2014 Microsoft