CSS, HTML und Javascript mit {stil}

CSS display:flex

display:flex – Positionieren

CSS display:flex erweitert die Technik des Positionierens und ersetzt das aufwändige CSS für Grid-Systeme.

Positionieren mit CSS position:relative, position:absolute oder fixed und float war immer ein Spagat. Wir bringen zwar über 10 Jahre Erfahrung mit der Positionierung aus CSS2 für komplexe Webseiten-Layouts mit, aber jeder Webdesigner weiß, wie mühsam und frustrierend der Weg zu einem responsiven Webdesign ist.

diplay:flex ist auch nicht gerade intuitiv, aber flexibler, exakter und mächtiger als die klassische Mischung aus position: relative, position: absolute und float. Ohne Tricks und Clearfix erzeugt display: flex ein Layoutraster mit Spalten gleicher Höhe.

Positionieren mit display:flex

Das Layout der Webseite beginnt mit einem Container mit der Eigenschaft display: flex. display:flex stellt alle direkten Nachkommen eines Elements in Zeilen oder Spalten dar. Die Nachkommen müssen nicht einmal vom selben Typ sein.

Spalten mit display:flex

Der Flex-Container passt ohne weitere Angaben die Breite seiner Nachkommen an den Inhalt an. Alle Elemente bekommen dieselbe Höhe.

Die Flexboxen bleiben in einer Reihe, egal wie breit der Viewport des Browsers oder der umfassende Container ist.

flex-direction: row;
<style>
   #flexContainer {
      display: flex;
      flex-direction: row;
   }
   .fbox { padding: 4px; background: gainsboro }
</style>
Flex 1 mit etwas Text
Flex 2 hat ein wenig mehr Text, aber nicht viel
Flex 3 ist ein kurzes
Flex 4 enthält den meisten Text und ist das längste und das letzte Flex

Responsives Design mit display:flex

Alle direkten Nachkommen der Flexbox sind automatisch Flex-Items und in jeder Reihe alle gleich hoch.

Einfacher Text in einem p-Tag

img in a flex container

Ein div mit einer Reihe von Elementen

  • Listitem
  • Listitem

Breakpoints und display:flex verstehen einander bestens.

.mixed { 
   display: flex;
   flex-wrap:wrap; 
}
.mixed>* { 
   width: 45%; 
   margin: 10px; border: 1px solid silver;
}
@media (min-width: 980px) {
   .mixed>* { width: 22%;}
}

flex-direction: row / column

flex-direction ordnet die Flex-Items in Zeilen oder Spalten. Die Vorgabe für flex-direction ist row – hätte also gar nicht notiert werden müssen.

flex-direction: column;
<style>
   #flexCols {
      display: flex;
      flex-direction: column;
   }
   .cbox { padding: 4px; background: lavenderblush }
</style>
Flex 5 mit etwas Text
Flex 6 hat ein wenig mehr Text, aber nicht viel
Flex 7 ist ein kurzes
Flex 8 enthält den meisten Text und ist das längste und das letzte Flex

flex-direction:row-reverse

flex-direction:row-reverse dreht die Reihenfolge der Flexboxen um.

flex-direction: row-reverse;
<style>
   #flexReverse {
      display: flex;
      flex-direction: row-reverse;
   }
   .rbox { padding: 4px; background: lightsteelblue }
</style>
Flex 9 mit etwas Text
Flex 10 hat ein wenig mehr Text, aber nicht viel
Flex 11 ist ein kurzes
Flex 12 enthält den meisten Text und ist das längste und das letzte Flex

Für flex-direction gibt es also vier Werte:

  • row (default)
  • row-reverse
  • column
  • column-reverse

Wenn der Text von links nach rechts läuft (ltr), laufen auch die Flexboxen von links nach rechts. Läuft der Text von rechts nach links, ist die Richtung der Flexboxen ebenfalls von rechts nach links.

flex order

order: n bestimmt eine ausdrückliche Reihenfolge.

Flex 1 mit etwas Text
Flex 2 hat ein wenig mehr Text, aber nicht viel
Flex 3 ist ein kurzes
Flex 4 enthält den meisten Text und ist das längste und das letzte Flex
#flexOrder {
	display: flex; 
}

.obox:nth-child(1) {order: 2}
.obox:nth-child(2) {order: 3}
.obox:nth-child(3) {order: 4}
.obox:nth-child(4) {order: 1}

Flex umbrechen – flex-wrap:wrap

Per Vorgabe reihen sich die Flexboxen eines Flex-Containers immer in einer einzigen Zeile auf, egal, wie viele Boxen in die Zeile gepackt werden.

Mit flex-wrap:wrap bricht die Zeile um.

flex-wrap: wrap
<style>
#flexWrap { 
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.wbox { background: lightyellow }
</style>
Flex 13 mit etwas Text
Flex 14 hat ein wenig mehr Text und ist größer als sein Nachbar
Flex 15 kurz
Flex 16 enthält den meisten Text. Flex 16 enthält den meisten Text. Flex 16 enthält den meisten Text. Flex 16 enthält den meisten Text.

Mit einfachen Regeln bestimmt CSS display:flex, was mit dem Raum zwischen den Elemente passiert und wie Elemente ausgerichtet werden.

  • Die Elemente zentrieren,
  • zwischen linkem und rechten Rand gleichmäßig verteilen,
  • an die linke oder rechte Seite setzen.

Firefox war der letzte der großen Browser und unterstützt Multi-Line (also das Umbrechen der Flexboxen in mehrere Zeilen) erst ab Version 28. Ältere Firefox-Version lassen die Luft aus den Flexboxen und listen alle in einer Reihe.

Um ältere Versionen von Firefox nicht zu alt aussehen zu lassen, kann man zur Not auf eine Darstellung als Spalten ansetzen.

@supports not (flex-wrap: wrap) {
	.view-start {
		flex-direction: column;
	}
 
	.pageflex {
		width: 50%;
	}
}

Das ist nicht schön, aber Firefox 29 korrigiert den Fehler und kann Flexboxen umbrechen.

Anstelle der einzelnen flex-Eigenschaften gibt es eine Kurzschrift.

-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;

flex grow / shrink / basis

Die Größe der direkten Nachkommen eines Flex-Containers wird durch die Eigenschaft flex bestimmt. flex setzt das Verhältnis zwischen den flex-items fest und sagt, wie sich ihre Größe bei einem kleineren oder größeren Viewport verändert.

flex ist die Kurzschrift für drei Komponenten:

  • flex grow
  • flex shrink
  • flex basis
Linke Spalte
Mittlere Spalte
rechte Spalte
<style type="text/css">
.gbox1 { flex:1 2 auto }
.gbox2 { flex:3 2 auto }
.gbox3 { flex:2 1 auto }
</style>

Das Vorgehen ähnelt dem CSS Layout-Grid: Die mittlere Box ist drei mal so groß wie die linke Spalte, die dritte Spalte hält zunächst zwei Teile. Wenn der Platz schmaler wird, wird Spalte 1 anteilig mehr Platz eingeräumt. Dabei aber nicht übersehen, dass hier der freie Platz aufgeteilt wird!

.flexItem {
flex: 1 1 100px;
	  ^ ^   ^
	  | |   |
	  | |   +---- basis
	  | +---- shrink
	  +---- grow
}      
  • flex legt fest, wie ein Flex-Element relativ zu anderen Flex-Elementen innerhalb desselben Containers wächst. Der default-Wert ist 1. Bei 1 haben alle Flex Items dieselbe Größe.
  • flex shrink legt fest, wie sich ein Flex-Element relativ seinen Nachbarn innerhalb desselben Containers verkleinert. Auch für Flex Shrink ist der default-Wert 1 und bei 1 haben alle Flex Items dieselbe Größe.
  • Mit basis kann kann eine Größe in Pixeln, % oder anderen Größenordnungen angegeben werden – ähnlich wie die Eigenschaft width:33% oder width:200px. Dann ist das der Basis-Raum, der einem Element zur Verfügung steht, bevor der freie Raum verteilt wird. Wird kein Wert angegeben, ist der default-Wert 0.

Eine ausführliche Erklärung der möglichen Werte und Kombinationen gibt es in der Flexbox-Definition beim W3C.

Flex-Versionen und Browser-Unterstützung

Die Syntax für display: flex hat sich in den letzten Jahren leicht geändert, so dass wir heute vor einem kleinen Sprach- bzw. Versionswirrwarr stehen.

#flexContainer {
   display: flex;          // alle anderen
      display: -webkit-flex;  // für alte Webkit-Browser
      display: -ms-flexbox;   // IE 10
   
}

Man könnte meinen, dass jeder Browser eine leicht abgewandelte Syntax nutzt.

200920112012
display: boxdisplay:flexbox
auch als Teener-Syntax bezeichnet
display:flex
Firefox (ohne Präfix)nur Internet Explorer 10Opera ohne Präfix
Safari (webkit-Präfix)Safari mit webkit-Präfix
Android (webkit-Präfix)
Chrome (webkit-Präfix)Chrome ohne Präfix
Blackberry ohne Präfix

display: flex und CSS margin

Während margin bei normalen Block-Elementen kollabiert, wird margin in die Berechnung des verfügbaren Platzes bei Flexboxen hinzugezogen. Wo margins nebeneinander liegen, werden sie addiert. Dabei ist es gleich, ob die Flex-Element vertikal (als Column) oder horizonal (als Row) orientiert sind.