joerghuelsermann.de Das Modell der flexiblen Boxen

Das Modell der flexiblen Boxen

Die Funktionsweise des flexiblen Modell der Boxen möchte ich an dieser Stelle erläutern. Voraussichtlich dürften Listen von Navigationen die meisten Anwendungen sein und aus diesem Grunde verwende ich ungeordnete Listen in meinen Beispielen. Aber auch die Struktur einer Webseite kann mit dieser Technik aufgebaut werden. Die Spezifikation für diese Technik sollte weitere Informationen beinhalten.

Das Verhalten der Container mit dem fexiblen Modell ist stark abhängig vom dem Raum der verfügbar ist. Das gilt sowohl in der Breite wie der Höhe und wirkt sich bei verschiedenen CSS Eigenschaften aus. Der Raum kann auch mit Angaben für Abstände zusätzlich beeinflusst werden.

Überprüfung der Eigenschaften

Da die Beispiele auf dieser Seite davon abhängig sind ob bestimmte CSS Eigenschaften zur Verfügung stehen wird an dieser Stelle eine Überprüfung gestartet.

Eigenschaften Elternelement

Die folgenden Eigenschaften werden dem Element zugewiesen welches die flexiblen Elemente beinhaltet.

display

Das Verhalten ist ähnlich wie bei block und inline Elementen. Grundsätzlich wird bei flex es möglich den Raum zu modifizieren mit den betreffenden CSS Eigenschaften die eine Position verändern. Bei inline-flex müsste durch Angabe einer Breite die größer ist als der Raum den die Elemente einnehmen dieses Verhalten erst geschaffen werden. Beispiel zum Einsatz von display

  • flex
  • inline-flex
flex-direction

Die horizontale oder vertikale Ausrichtung der Liste und Reihenfolge wird über diese CSS Eigenschaft gesteuert. Beispiel zum Einsatz von flex-direction

  • column
  • column-reverse
  • row
  • row-reverse
flex-wrap

Falls ein Umbruch über mehrere Zeilen erlaubt wird kann der zur Verfügung stehende Raum in der Höhe erweitert werden. Beispiel zum Einsatz von flex-wrap

  • nowrap
  • wrap
  • wrap-reverse
justify-content

Bestimmt die Position der Elemente in der horizontalen Richtung, falls der zur Verfügung stehende Raum grösser ist als der Raum den die flexiblen Elemente beanspruchen. Beispiel zum Einsatz von justify-content

  • center
  • flex-end
  • flex-start
  • space-around
  • space-between
align-items

Anordnung der flexiblen Elemente in der Vertikalen, wenn mehr Raum als benötigt zur Verfügung steht. Einzelne Elemente können durch die align-self Eigenschaft überschrieben werden. Beispiel zum Einsatz von align-items

  • baseline
  • center
  • flex-end
  • flex-start
  • stretch
align-content

Bestimmt die Position der Elemente in der vertikalen Richtung falls der zur Verfügung stehende Raum grösser ist als der Raum den die flexiblen Elemente beanspruchen. Zusätzlich muss ein Umbruch über mehrere Zeilen erlaubt und vollzogen sein damit diese CSS Eigenschaft greifen kann. Beispiel zum Einsatz von align-content

  • center
  • flex-end
  • flex-start
  • space-around
  • space-between
  • stretch

Eigenschaften Kindelemente

Die folgenden Eigenschaften werden den flexiblen Elementen zugewiesen.

order

Der Initial Wert dieser Eigenschaft liegt bei 0. Negative Werte sind erlaubt und nach der aufsteigenden Reihenfolge der Zahlen werden die Elemente angeordnet. Beispiel zum Einsatz von order

flex-grow

Bezeichnet einen Faktor für das Verhältnis des Wachstum der Elemente untereinander in dem Falle wenn ein grösserer Raum zur Verfügung steht. Der Initial Wert liegt bei 1. Erlaubte Werte starten bei 0. Der Wert 0 lässt kein Wachstum zu. Beispiel zum Einsatz von flex-grow

flex-shrink

Der Schrumpffaktor wird analog zum Faktor für das Wachstum angewendet in den Fällen wo weniger Raum zur Verfügung steht als die Elemente benötigen. Der Initial Wert liegt bei 0, was kein Schrumpfen erlaubt. Werte ab 0 sind erlaubt und nachdem Verhältnis der Werte werden die Elemente entsprechend verkleinert. Beispiel zum Einsatz von flex-shrink

flex-basis

Bezeichnet eine Basis für die Breite der Elemente. Der Initial Wert ist auto. Erlaubt sind Angaben für die Breite. Beispiel zum Einsatz von flex-basis

align-self

Der Initial Wert auto übernimmt die bei der Eigenschaft align-items vorgenommene Einstellung. Diese CSS Eigenschaft dient dazu bei verfügbaren Raum in der vertikalen Richtung für einzelne Elemente eine Modifizierung vorzunehmen. Beispiel zum Einsatz von align-self

  • auto
  • baseline
  • center
  • flex-end
  • flex-start
  • stretch

Kurzschreibweisen

Die beiden kurzen Schreibweisen flex-flow und flex beinhalten folgende einzelne Eigenschaften.

flex-flow
Zusammenfassung von flex-direction und/oder flex-wrap
flex

Besteht aus den einzelnen Angaben von flex-grow, flex-shrink und flex-basis. Angaben enthalten minimal flex-grow optional mit flex-shrink oder Werte für flex-basis. Zusätzlich werden folgende Werte in dieser Form übersetzt.

  1. initial = 0 1 auto
  2. auto = 1 1 auto
  3. none = 0 0 auto
  4. 3 = 3 1 0px

Überprüfung durch CSS

Durch eine einfache Überprüfung durch CSS ist man meiner Ansicht nach in der Lage zu prüfen ob man unbesorgt das flexible Modell der Boxen einsetzen kann.

Überprüfung flex-wrap
@supports(flex-wrap:initial){
ul{display:flex;flew-wrap:wrap;}
}

Beispiele zu den einzelnen CSS Eigenschaften

Bewusst habe ich die Beispiele nach den Erklärungen gesetzt um diese als ersten Schritt theorethisch zu behandeln um danach mehr die praktische Umsetzung zu demonstrieren.

display

Dieses Beispiel dient dazu zu zeigen der Unterschied zwischen flex und inline-flex sich verhält wenn mehrere Listen nacheinander vorhanden sind.

  1. flex
  2. inline-flex
  3. inline-flex
  4. flex
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

flex-direction

Es folgen Beispiele für die Ausrichtung der flexiblen Elemente. Folgende Reihenfolge wurde angewendet.

  1. column
  2. column-reverse
  3. row
  4. row-reverse
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

flex-wrap

Für das erste Listenelement wurde eine flex-basis von 100% zugewiesen. Die Auswirkungen des Umbruchs in den drei Fällen werden durch diese Massnahme erst deutlich.

  1. no-wrap
  2. wrap
  3. wrap-reverse
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

justify-content

Demonstration der Ausrichtung in der vertikalen Richtung wenn genügend freier Raum vorhanden ist.

  1. center
  2. flex-end
  3. flex-start
  4. space-around
  5. space-between
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

align-items

Die Anordnung der einzelnen Elemente kann bei freien Raum in der Höhe ausgerichtet werden durch die Eigenschaft align-items für alle flexiblen Elemente in der selben Weise.

  1. baseline
  2. center
  3. flex-end
  4. flex-start
  5. stretch
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

align-content

Für dieses Beispiel wurde freier Raum in der Höhe geschaffen bei erlaubtem Umbruch und die einzelnen Elemente nehmen jeweils 100% der verfügbaren Breite ein damit mehrere Zeilen entstehen.

  1. center
  2. flex-end
  3. flex-start
  4. space-around
  5. space-between
  6. stretch
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

order

Damit auch eine Änderung der Reihenfolge der flexiblen Elemente durch Modifizierung der CSS Eigenschaft order vorgestellt werden kann folgen nun zwei Beispiele mit den angegebenen Werten für die einzelnen Elemente.

  1. 1 0 0
  2. 1 0 -1
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

flex-grow

Folgende Werte wurden in den drei Beispielen für die Eigenschaft flex-grow gesetzt um Auswirkungen durch das Verhältnis auf die Breite der einzelnen Elemente zu zeigen.

  1. 1 1 1
  2. 1 2 3
  3. 1 0 0
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

flex-shrink

Das Beispiel dient dazu zu verdeutlichen was es bedeutet wenn der verfügbare Raum kleiner ist als benötigt. Der Ruam wurde in dem ersten Beispiel so begrenzt das die benötigte Breite nicht erreicht werden kann. Gesteuert wird das über einen höheren flex-basis Wert der in der Summe die Breite übersteigt. Und in dem Fall wo weniger Raum zur Verfügung steht finden folgende flex-shrink Werte ihre Anwendung. Im zweiten Fall ist genügend Raum vorhanden das alle Elemente ihre maximale Breite einnehmen können.

  1. 1
  2. 2
  3. 3
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

flex-basis

Nun folgen einige Angaben für die flex-basis Eigenschaft ohne die Möglichkeit durch einen flex-grow Wert den kompletten verfügbaren Raum ein zu nehmen.

  1. auto
  2. 5em
  3. 10%
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

align-self

Um auch die Auswirkungen der Änderung der align-self Eigenschaft zu demonstrieren, wenn in der Höhe mehr Raum zur Verfügung steht für einzelne Elemente wurde dieses Beispiel erstellt.

  1. auto
  2. baseline
  3. center
  4. flex-end
  5. flex-start
  6. stretch
Beispiele
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Der Unterschied zwischen baseline und flex-start

Den Unterschied zwischen den beiden Werten baseline und flex-start bei den Eigenschaften align-items und align-self sind in den früheren Beispielen nicht deutlich hervor gehoben worden. baseline ist abhängig von der Position der ersten Zeichen in der vertikalen Richtung.

  1. baseline
  2. flex-start
Beispiele
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

Interaktion

Durch den Wert li{flex:1;} sorgt man dafür das die Elemente sich gleichmässig verteilen und den verfügbaren Raum einnehmen. Wenn nun ein durch li:hover{flex:1 100%;} ein einzelnes Element den freie Raum für sich alleine beansprucht erkennt man wie sich die flexiblen Boxen auswirken.

Beispiele
  • 1
  • 2
  • 3

Navigationslisten

Wie ich anfangs bereits erwähnte würde ich diese Technik für Navigationen einsetzen. Als Basis Konfiguration würde ich ul{flex-wrap:wrap;} optional mit ul{justify-content:space-between;} oder li{flex-grow:1;} anwenden. Die optionalen Angaben sind für die Fälle da, in denen die volle Breite genutzt werden soll. Dazu noch eine entsprechende flex-basis einsetzen und die Liste sollte sich flexibel genug gestalten um reponsive Webseiten zu erstellen.

  1. ul{justify-content:space-between;}
  2. li{flex-grow:1;}
Beispiele
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Struktur einer Webseite

Das jetzt angewendete Prinzip ist es für eine reponsive Website durch Einsatz von Media Queries unterschiedliche flex-basis Werte zu setzen die sich anhand der verfügbaren Breite verändern.

Beispiele
  • header
  • nav
  • main
  • aside
  • footer