Using CSS flexible boxes

Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible Box Modell eine Verbesserung gegenüber dem Block Modell dar, da es keine Floats nutzt. Außerdem werden die Margins eines Containers nicht mit den Margins seines Inhalts zusammenfallen.

Viele Designer empfinden die Verwendung des 'flexbox' Modell als einfacher. Kindelemente einer Flexbox können in jede Richtung ausgelegt werden, sowie eine flexible Größe besitzen, um sich so an das Display anzupassen. Die Positionierung von Kindelementen ist dadurch wesentlich einfacher und komplexe Layouts sind nicht nur einfacher, sondern auch  mit schönerem Code zu erlangen, was auf die unabhängige Platzierung der Elemente im Quellcode zurückzuführen ist. Diese Unabhängigkeit beeinflusst bewusst nur die visuelle Darstellung und lässt somit die Sprachordnung und Navigation, die auf dem Quellcode basiert, unberührt.

Flexible boxes Konzept

Ein entscheidender Aspekt des Flex-Layouts ist die Möglichkeit die Breite und/oder Höhe der einzelnen Elemente, entsprechend des zur Verfügung stehenden Platzes, auf jedem Gerät anpassen zu können. Ein ‘flex-Container’ dehnt seine Elemente entweder aus, um den verfügbaren freien Platz zu füllen oder verkleinert sie um einen Overflow zu vermeiden.

Der ‘flexbox-layout-algorythmus’ ist richtungsunabhängig, entgegen dem ‘block-layout’, dass vertikal basiert ist oder dem ‘inline-layout’, das horizontal basiert ist. Obwohl das ‘block-layout’ gut auf Seiten anwendbar ist, so mangelt es ihm an individuellen Richtlinien um Applikationskomponenten zu unterstützen, die die Ausrichtung ändern, sich in ihrer Größe anpassen, je nach Benutzerprogrammen ausdehnen oder verkleinern, von der Horizontalen in die Vertikalen rotieren müssen und so weiter. Das ‘flexbox-layout’ lässt sich am besten auf Anwendungskomponenten und auf kleinere Layouts anwenden, während das (neu aufkommende) ‘grid-layout’ für großflächigere Layouts bestimmt ist. Beide sind Bestandteil größerer Bemühungen der CSS Arbeitsgruppe, um eine größere Interoperabilität zwischen Webanwendungen mit den unterschiedlichsten Benutzerprogrammen, den vielfältigen Schreibmethoden und anderen Anforderungen die an die Flexibilität gestellt werden, zu ermöglichen.

Flexible boxes Wortschatz

Während sich die Diskussion der Flexible Boxes von Bezeichnungen wie Horizontal/inline Achse und Vertikal/Block Achse befreit, so bedarf es dennoch einer neuen Terminologie um das Model adäquat zu beschreiben. Folgendes Diagramm soll als Referenz, zur Erörterung des Wortschatzes, dienen. Es zeigt einen Flex Container dessen Eigenschaft flex-direction den Wert row hat. Das bedeutet, dass die flex items (im weiteren Verlauf als 'Flex Elemente' benannt) einander auf der Horizontalen, der Hauptachse, folgen - gemäß der gängigen Schreibmethode, die der Schreibrichtung folgt - in diesem Fall von links nach rechts.

Flex container

Das Elternelement, in dem die ‘flex Elemente’ (entspricht den flex items im Diagramm) liegen. Ein ‘flex Container’ wird durch den Wert flex oder inline-flex der Eigenschaft display bestimmt.

Flex item (Flex Elemente)

Jedes Kindelement eines ‘flex-Containers’ wird zu einem ‘flex Element’. Text der sich unmittelbar in einem ‘flex Container’ befindet wird von einem anonymen ‘flex Element’ umspannt.

Achsen

Jedes ‘flexible-Box-Layout’ folgt zwei Achsen. Die Hauptachse ist die Achse auf der die ‘flex Elemente’ aufeinander folgen. Die Querachse ist die Achse, die senkrecht zur Hauptachse steht.

• Die flex-direction Eigenschaft bestimmt die Hauptachse
• Die justify-content Eigenschaft bestimmt wie ‘flex Elemente’ auf der Hauptachse, in der aktuellen Zeile ausgelegt werden.
• Die align-items Eigenschaft bestimmt die standardmäßige Ausrichtung der ‘flex Elemente’ auf der Querachse der aktuellen Zeile.
• Die align-self Eigenschaft bestimmt die Ausrichtung einzelner ‘flex Elemente’ auf der Querachse und überschreibt den standardmäßig definierten Wert durch align-items.

Richtungen

Die main start/main end und cross start/cross end Seiten des Flex Containers beschreiben den Ursprung und den Endpunkt der Fließrichtung von 'flex Elementen'. Sie folgen der Haupt- und Querachse des ‘flex Containers’ die durch den Vektor festgelegte Schreibrichtung durch writing-mode (von links nach rechts, rechts nach links usw.)

• Die order Eigenschaft fügt Elemente den Ordnungsgruppen hinzu und legt fest, welche Elemente zuerst erscheinen.
• Die flex-flow Eigenschaft fasst die flex-direction und flex-wrap Eigenschaften zusammen, um die flex Elemente anzulegen.

Lines

Die 'flex Elemente' können auf eine oder mehrere Zeilen ausgeleget werden, gemäß der flex-wrap Eigenschaft, welche die Richtung der Querachse und die Richtung der Zeilen steuert, in welche diese gestappelt werden.

Dimensions

Die plattformübergreifende Entsprechung von Höhe und Breite der ‘flex Elemente’ sind main size und cross size, die entsprechend der Haupt- bzw. Querachse des ‘flex Containers’ folgen.

• Der Ausgangswert der min-height und min-width Eigenschaften ist 0
• Die flex Eigenschaft fasst die flex-grow, flex-shrink und flex basis Eigenschaften zusammen um die Flexibilität der Flex Elemente zu gewährleisten.

Flexible Box Auszeichnung

Um das CSS für Elemente auszuzeichnen die diese Styles benutzen, setzt man die display Eigenschaft wie folgt:

display : flex

oder

display : inline-flex

Macht man es so, definiert man das Element als einen ‘flex Container’ und seine Kindelemente als ‘flex Elemente’. Der flex Wert macht den ‘flex Container’ zu einem ‘block-level Element’. Der flex-inline Wert macht den Flex Container zu einem kleinen ‘inline-level Element’.

Hinweise zu Flex Elementen

Text der sich unmittelbar in einem Flex container befindet wird automatisch in ein anonymes ‘flex Element’ umschlossen. Ein anonymes ‘flex Element’, das nur aus Leerraum besteht wird nicht gerendert, ganz so als ob es durch display: none ausgezeichnet ist.

Absolut positionierte Kindelemente eines ‘flex Containers’ werden so angeordnet, dass ihre statische Position, unter Berücksichtigung der haupt start content-box Ecke ihres Flex Container, bestimmt wird.

Durch eine bekanntes Problem, wird durch die Deklaration von visibility: collapse auf ein ‘flex Element’ gegenwärtig so behandelt als ob es sich um die Deklaration display: none handelt und sich nicht wie gewollt als visibility: hidden verhält. Vorgeschlagener Workaround, bis zur Lösung dieses Problems, ist es die Deklaration visibility: hidden für ‘flex elemente’ zu benutzen, sodass sie sich so verhalten, als ob sie mit visibility: collapseausgezeichnet sind. Für mehr Informationen siehe Bug 783470.

Die margins benachbarter ‘flex Elemente’ fallen nicht zusammen. Die Benutzung von auto margins absorbiert überflüssigen Platz in der Vertikalen und der Horizontalen und kann zur Ausrichtung oder Trennung von benachbarten ‘flex Elementen’ genutzt werden. Siehe Align with ‘auto’ margins in der W3C Flexible Box Layout Model Spezifikation für eine detailliertere Beschreibung.

Um eine vernünftige, minimal Größe für ‘flex Elemente’ zu gewährleisten, benutzt man min-width: auto und/oder min-height: auto. Bei ‘flex Elementen’ berechnet der auto Wert die mindest Breite/Höhe seiner Elemente so, dass nicht mehr Platz zu Verfügung steht, als es durch die Breite/Höhe seines Inhaltes erforderlich ist. Dadurch ist sichergestellt, dass die Elemente groß genug gerendert werden um ihren Inhalt anzeigen zu können. Siehe min-width und min-height für eine detailliertere Beschreibung.

Die ‘alignment Eigenschaften’ der Flexbox gewährleisten eine “echte” Zentrierung, entgegen anderer Zentrierungsmethoden in CSS. Dies bedeutet, dass ‘flex Elemente’ auch dann zentriert bleiben auch wenn sie ihren Container überfließen. Dies kann manchmal jedoch problematisch sein. Überfließt der Inhalt die obere Kante der Seite oder die linke Seite (in LTR sprachen wie dem Englischen; Bei RTL Sprachen wie dem Arabischen tritt dieses Problem auf der rechten Seite auf), so kann man in diesem Bereich nicht mehr Scrollen auch wenn sich darin Inhalte befinden! In einer künftigen Version, bekommen die ‘alignment Eigenschaften’ so erweitert, dass es auch hier eine “sichere” Möglichkeit geben wird. sollte dies ein Problem darstellen, kann man momentan stattdessen auf margins zurückgreifen, um eine Zentrierung zu gewährleisten, da sich diese “sicher” verhalten und bei einem Überfließen nicht mehr zentrieren. Anstelle der ‘alignment Deklaration’ kann man einfach auto margins, auf die zu zentrierenden Elemente anwenden. Anstelle der justify- Eigenschaft kann man auto margins auf die äußeren Enden, des ersten und letzten ‘flex Elementen’ innerhalb eines ‘flex Containers’ setzen. Die auto margins werden entsprechend des geschätzten, freien Platzes, die ‘flex Elemente’ entweder zentrieren, sollte genug Platz vorhanden sein und zur normalen Ausrichtung wechseln, wenn kein Platz da ist. Will man jedoch justify-content durch ein margin basierte Zentrierung, in einem multi-line Flexbox ersetzen, hat man wahrscheinlich kein Glück dabei, da man die margins auf dem ersten und letzten ‘flex Element’ auf jeder Zeile setzen müsste. Sofern, man nicht schon im Voraus bestimmten kann, welches Element auf welcher Zeile landet, kann man margin basierte Zentrierung auf der Hauptachse nicht zuverlässig benutzen um die justify-content Deklaration zu ersetzen.

Man sollte sich daran erinnern, dass auch wenn die Reihenfolge in der Darstellung von Elementen unabhängig zur Notierung im Quellcode ist, wirkt sich diese nur in der visuellen Darstellung aus und belässt Sprachreihenfolge und Navigationsanordnungen gemäß der Anordnung im Quelltext unberührt. Sprach und Navigationssequenzen werden sogar von der order Eigenschaft unberührt gelassen. Dementsprechend müssen Entwickler dafür Sorge tragen, Elemente in einer entsprechenden Anordnung zu Positionieren um die Zugänglichkeit nicht zu gefährden.

Flexible Box Eigenschaften

Eigenschaften die Flexible Boxes nicht beeinflußen

Da flexible Boxes einen anderen Darstellungsalgorithmus verwenden macht die Verwendung einiger Eigenschaften auf ‘flex Container’ keinen Sinn:

• column-* Eigenschaften der multiple column Modules haben keinen Einfluß auf Flex Elemente.
• float und clear haben keinen Einfluß auf ‘flex Elemente’. Die Benutzung von float sorgt dafür dass die display Eigenschaft den errechneten Wert block zugewiesen bekommt.
• vertical-align hat keinen Einfluß auf die Ausrichtung von ‘flex Elementen.

Beispiele

Basis Flex Beispiel

Dieses Grundbeispiel zeigt wie man ein Element "flexiebel" macht und wie sich gleichrangige Elemente in einem flexiblen Zustand verhalten.

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

   .flex
   {
      /* basic styling */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See https://bugzil.la/731886 for more info.) */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 200px;
   }
   
   </style>
    
 </head>
 <body>
  <p>Flexbox nuovo</p>
  <div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>
 </body>
</html>

Holy Grail Layout Beispiel

Dieses Beispiel demonstriert wie flexbox die Möglichkeit bietet, Layouts entsprechend verschiedener Auflösungen, dynamisch anzupassen. Folgendes Diagramm stellt die Transformation bildlich dar.

Hier wird das Beispiel dargestellt, dass sich eine Seite, die für einen Browser ausgelegt ist, sich auf ein Smartphone Fenster anpassen muss. Es müssen sich nicht nur die Größenverhältnisse der Elemente anpassen sondern  auch die Anordnung, in der die Elemente präsentiert werden. Das wird durch die Benutzung von Flexbox sehr vereinfacht.

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

 </style>
  </head>
  <body>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

Playground (Spielwiese)

Es gibt verschiedene, online verfügbare Spielwiesen im Internet zum Experimentieren:

• Flexbox Playground
• Flexy Boxes
• Flexbox In 5

Things to keep in mind

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

Browser compatibility

[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with -webkit. The prefix was removed again in Opera 17 and Opera Mobile 24.

See also

• The Flexbugs project for information on bugs in browsers' implementations of flexbox.