CSS display:flex – Positionieren und Ausrichten

CSS Positionieren mit display flex – Ausrichten und Positionieren wie Grafikprogramm

display:flex positioniert Elemente in Zeilen bzw. Spalten und verteilt den freien Raum mit justify – wie das Ausrichten und Verteilen von Elementen im Grafikprogramm.

Alle direkten Nachkommen eines Elements werden zu Flexboxen, die entlang der horizontalen (row) und vertikalen Achse (column) ausgerichtet werden.

Positionieren mit dem Boxmodell war immer Fummelei. Erst durch jahrelange Erfahrung haben wir das Puzzle aus position:absolute, position:relative und float in den Griff bekommen.

display:flex ist eine intuitive Lösung für das horizontale Ausrichten benachbarter Elemente. Und während das horizontale Zentrieren von Elementen mit CSS float ein Spagat war, kostet es mit display:flex gerade mal eine Zeile.

Alle modernen Browser beherrschen display: flex (ohne Browser-Präfix). Selbst Internet Explorer unterstützt flex ab IE10, allerdings in einer älteren Version der Syntax und nur mit Browser-Präfix (IE 10 brauchte auch noch display : inline-block für Flex-Boxen, damit -ms-flex-flow : wrap funktioniert).

Positionieren mit dem Flexmodell

Das Flexmodell hat das Ausrichten und Verteilen von Boxen und freiem Raum aus der Grafik abgekupfert, und basiert auf einer horizontalen bzw. einer vertikalen Achse:

display:flex verteilt HTML-Boxen um eine horizontale bzw. vertikale Achse, ähnlich wie ein Grafikprogramm

So sieht das Flexmodell für eine zeilenorientierte Verteilung (flex-direction:row) der Flexboxen aus. Äquivalent gibt es auch noch die spaltenorientierte Verteilung von Flexboxen (flex-direction: column).

Alle direkten Nachkommen eines Containers mit CSS display:flex werden zu Flex-Items und reihen sich in einer Zeile auf. Die Nachkommen müssen nicht vom selben Typ sein. Per Vorgabe erzeugt display:flex eine Zeile von Boxen.

Die Eigenschaften des Flexmodells werden dem umfassenden Container zugewiesen und verteilen Flexboxen in Zeilen oder Spalten (display: flex bildet also kein Layout-Raster wie display: grid). display: flex gibt allen Flexboxen dieselbe Höhe und nimmt uns so nebenbei die Berechnungen für den Platz zwischen den Boxen ab.

Mit space-around und space-between wird der freie Raum zwischen den Flexboxen verteilt.

flex-direction
row (default)| column
flex-flow (Kurzschrift für flex-direction und flex-wrap)
row wrap | column wrap
flex-wrap
nowrap (default) | wrap | wrap-reverse
justify-content
flex-start (default) | flex-end | center | space-between | space-around
align-items
flex-start (default)| flex-end | center | baseline | stretch
align-content
flex-start | flex-end | center | space-between | space-around | stretch (default)

Die Reihenfolge der Elemente einer Flexbox kann durch order beliebig festgelegt werden.

order
.flexitem:nth-child(n) {order: m} (Beispiel für flex order)

Browser-Support für display:flex

  • IE ab Version 10 (alte Syntax)
  • Firefox ab Version 28
  • Chrome ab Version 33
  • Safari ab Version 7
  • Opera ab Version 22

Das Flexbox-Modell ist noch nicht in allen Browsern vertreten (nicht IE8 und IE9) und ist noch nicht vollständig ratifiziert, da die Standardisierer noch über die Funktionen diskutieren.

IE 10 braucht den Browser-Präfix und agiert zudem noch nach der alten Syntax : Flexible Box-Layout (Flexbox) in Internet Explorer 10

display:flex

Die Eigenschaften display:block und display:inline-block kennen wir schon aus CSS2. display:flex und display: grid sind in CSS3 dazugekommen.

Ohne jegliche weitere Eigenschaft werden Flexboxen in einer Zeile aufgereiht. Wenn der Viewport des Browsers kleiner wird, quetscht der Browser die Boxen in eine Zeile.

.flexed { 
   display: flex; 
}

<div class="flexed">
   <div class="flexitem">1 Nullam interdum malesuada dolor</div>
   <div class="flexitem">2 Lorem ipsum dolor sit amet</div>
   <div class="flexitem">3 Nullam sollicitudin</div>
   …
</div>

Wenn der Platz reicht und die Größe der Boxen nicht durch CSS begrenzt ist, hängen die Flexboxen auf der linken Seite des Flex-Containers.

display:flex

Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Fusce at aliquet lorem.
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan

Syntax

display : flex

Alte Syntax IE 10

display : -ms-flexbox

flex-direction

Verteilt alle direkten Nachkommen in einer Zeile (bzw. in einer Spalte, wenn zusätzlich flex-direction:column gilt). flex-direction: row ist die Voreinstellung und muss nicht explizit angegeben werden.

row

Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Fusce at aliquet lorem.
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan

flex-wrap

Packt alle Flexboxen in eine Zeile bzw. Spalte (nowrap), bricht die Zeile / Spalte um (wrap) oder kehrt die Reihenfolge der Flexboxen um (wrap-reverse).

Die Voreinstellung ist flex-wrap: nowrap – kein Umbrechen, sondern quetschen.

nowrap

1 Nullam interdum malesuada dolor,
et pellentesque lorem
2 Lorem ipsum dolor sit amet,
consectetur adipiscing
3 Nullam sollicitudin,
neque sit amet
cursus pulvinar
4 Nullam interdum malesuada dolor,
et pellentesque lorem
5 Fusce at aliquet lorem.
6 Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan

Syntax

flex-wrap : nowrap
flex-wrap : wrap
flex-wrap : wrap-revers
flex-wrap : column-revers

IE 10 braucht display:inline-block für die Flex-Items, damit -ms-flex-flow: wrap funktioniert.

Alte Syntax für IE10

-ms-flex-wrap : none
-ms-flex-wrap : wrap
-ms-flex-wrap : wrap-revers
-ms-flex-wrap : column-revers

justify-content

richtet Flexboxen entlang der Hauptachse (links, rechts, zentriert) und verteilt den freien Raum zwischen den Flexboxen mit space-between bzw. space-around.

flex-start

Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar

Neue Syntax

justify-content : flex-start
justify-content : flex-end
justify-content : center
justify-content : space-between
justify-content : space-around

Alte Syntax für IE10

-ms-flex-pack : start
-ms-flex-pack : end
-ms-flex-pack : center
-ms-flex-pack : justify
-ms-flex-pack : distribute

align-items

richtet Flexboxen an den Kanten oben, unten oder zentriert entlang der zweiten Achse aus (so wie justify-content entlang der Hauptachse).

flex-start

Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan

Neue Syntax

align-items : flex-start
align-items : flex-end
align-items : center
align-items : stretch
align-items : baseline

Alte Syntax IE 10

-ms-flex-align : start
-ms-flex-align : end
-ms-flex-align : center
-ms-flex-align : stretch
-ms-flex-align : baseline

align-content

verteilt die Flexboxen anhand ihres Inhalts auf der zweiten Achse (so wie justify-content die Boxen auf der Hauptachse verteilt). Mit flex-direction:row verteilt align-content die Boxen also in der Vertikalen.

Einen sichtbaren Effekt hat align-content nur, wenn mehr als eine Reihe bzw. eine Spalte vorhanden ist.

Die Vorgabe ist stretch, so dass die Boxen die volle Höhe des Flex-Containers einnehmen.

#acbox {
   height:320px;
   display:flex;
      display:-ms-flexbox;
   flex-flow: row wrap;
      -ms-flex-wrap: row-wrap;
   justify-content:space-around;
      -ms-flex-pack:justify;
   align-content:flex-start;
      -ms-flex-line-pack:start;
}

flex-start

Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan
Lorem ipsum dolor sit amet,
consectetur adipiscing
Lorem ipsum dolor sit amet,
consectetur adipiscing. Ut consequat ipsum eu turpis elementum
vehicula.

Neue Syntax

align-content : flex-start
align-content : flex-end
align-content : center
align-content : space-between
align-content : space-around
align-content : stretch

Alte Syntax IE10

-ms-flex-line-pack : start
-ms-flex-line-pack : end
-ms-flex-line-pack : center
-ms-flex-line-pack : justify
-ms-flex-line-pack : distribute
-ms-flex-line-pack : stretch

flex-shrink, flex-grow, flex-basis

Wenn der Platz im Flex-Container nicht vollständig von Flex-Items aufgefüllt ist, verteilt justify-content die Flex-Items (s.o.). flex-shrink, flex-grow und flex-basis verteilen den freien Platz oder schränken die Breite / Höhe von Flex-Items ein, wenn der Platz nicht reicht.

display: flex vs. display: grid

Das Flexbox-Modell ist in erster Linie für das Layout in Zeilen und Spalten gedacht. CSS Flex ist die schmerzfreie Alternative zu CSS float. Flex setzt zwei, drei Blogbeiträge in saubere Zeilen je Platz im Browserfenster.

CSS Grid ist ein Layout-Raster – ähnlich dem alten Tabellen-Layout – in Zeilen und Spalten.

display:grid für das Layout der Seite, display: flex in grid-areadisplay: flex in grid-area12341234

display flex ist flexibel: Wenn z.B. in einem Blog weitere Kurzfassungen in einer Übersicht erscheinen, fügen sie sich in Folge der Zusammenfassungen ein. Das CSS muss auch für das sechste, siebte oder elfte Element nicht geändert werden.

display grid ist für eine feste Anzahl von Elementen, deren Aufbau je nach Größe des Viewports angepasst wird.

Grid und Flex konkurrieren nicht miteinander, sondern ergänzen sich.

CSS Positionierung mit display:flex Positionieren mit display:flex Horizontale AchseVertikale Achseflex-startflex-endcenterspace-betweenspace-aroundflex-startflex-endcenterstretchbaseline