CSS display:flex – responsives Positionieren

Positionieren mit Flexboxen

Wir bringen ü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. display:flex ist auch nicht immer 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. Dabei können die Flexboxen per CSS order an beliebiger Stelle im Layout erscheinen.

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.

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

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

<style>
   #flexContainer {
      display: flex;
      flex-direction: row;
   }
   .fbox { padding: 4px; background: gainsboro }
</style>

Flex-Elemente können so schlicht daherkommen wie die vier lieblosen Kästchen, und so raffiniert wie die drei Karten, die sich auf kleinen Monitoren untereinander reihen.

Occelli Buttero

Lobesam die Teig milensis troppo verro. Ingelis itali logo knuprig.

Lausch mettis

Croissente Mundi

Anipasto grosso Mundo helbig hochizont labislis. Genug Frugento anti osso verdo lotesam sum nobility. Grosse Geschnack licki buttoni assenten veggie. Salizg Erde krummo mit die kruste.

Lausch mettis

Di Burunti Congalis

Ameli con Butto: Nee bloß nicht. Turkisi pasto Brötkens hilft gesundis bravi menti.

Lausch mettis

Responsives Design mit display:flex

Alle direkten Nachkommen der Flexbox sind automatisch Flex-Items und in jeder Reihe alle gleich hoch – selbst unterschiedliche HTML-Element (hier: Spalte 1 ist ein p-Element, Spalte 2 und 3 ein div, Spalte 4 ein ul-Element).

Einfacher Text in einem p-Tag

Ein div mit einer Reihe von Elementen

• Listitem
• Listitem

Breakpoints und display:flex verstehen einander bestens. In einem großen Browserfenster sitzen die vier Spalten nebeneinander, auf einem kleinen Viewport sitzen je zwei Boxen in zwei Reihen.

.mixed { 
   display: flex;
   flex-wrap:wrap; 
}

/** kleiner Viewport **/
.mixed>* { 
   width: 45%; 
   margin: 10px; border: 1px solid silver;
}

/** großer Viewport **/
@media (min-width: 980px) {
   .mixed>* { width: 22%;}
}

<div class="mixed">
	<p>Einfacher Text</p>
	<div><img src="image.png" width="482" height="482" alt="Sonne"></div>
	<div>
		<p>Ein div mit einer Reihe von Elementen</p>
		<img src="statistics.png" width="188" height="188" alt="Icon">
	</div>
	<ul>
		<li>Listitem</li>
		<li>Listitem</li>
	</ul>
</div>

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.

<style>
   #flexCols {
      display: flex;
      flex-direction: column;
   }
   .cbox { padding: 4px; background: lavenderblush }
</style>

Das ist nicht besonders spektakulär. flex-direction : column entfaltet seinen Reiz, wenn Elemente horizontal und vertikal zentriert werden sollen.

Flex Columns

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

.sbox { 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

flex-direction: column richtet gleich hohe Blöcke aus und bringt zusammen mit flex-basis Blöcke in Spalten auf gleiche Höhe.

flex-direction:row-reverse

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

<style>
   #flexReverse {
      display: flex;
      flex-direction: row-reverse;
   }
   .rbox { padding: 4px; background: lightsteelblue }
</style>

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

display flex und order: n bestimmen eine ausdrückliche Reihenfolge für die Darstellung bei verschiedenen Monitorgrößen.

#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}

IE 10 Syntax: -ms-flex-order:2;

flex order Syntax und Beispiele

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.

<style>
#flexWrap { 
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.wbox { background: lightyellow }
</style>

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%;
	}
}

Mehr zu CSS supports – der Abfrage, ob der Browser die CSS-Eigenschaft unterstützt.

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

<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.

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.