CSS, HTML und Javascript mit {stil}

CSS display:flex

CSS Positionieren mit display:flex

display:flex erzeugt Flexboxen aus allen direkten Nachkommen des Elements und richtet die flexiblen Boxen links, rechts, zentriert, oben oder unten aus – und zwar entlang der horizontalen (row) und vertikalen Achse (column).

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

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

display:flex bietet endlich eine einfache Lösung für das Problem, Elemente vertikal zu zentrieren. Und während das horizontale Zentrieren von Elementen mit CSS float ein Spagat ist, kostet es mit display:flex gerade mal eine Zeile.

Alle modernen Browser bieten Support für display flex (ohne Browser-Präfix). Internet Explorer unterstützt flex ab IE10, allerdings in einer älteren Version der Syntax und nur mit Browser-Präfix (IE 10 braucht display:inline-block für die 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 GrafikprogrammHorizontale AchseVertikale Achseflex-startflex-endcenterspace-betweenspace-aroundflex-startflex-endcenterstretchbaseline

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.

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 ist in CSS3 aufgenommen worden und muss für Webkit-Browser und IE noch mit dem Browser-Präfix geschrieben werden.

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.

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

Während display: flex bereits von allen modernen Browsern unterstützt wird, warten wir Anfang 2017 noch auf display: grid.

Das Flexbox-Modell ist in erster Linie für das Layout in einer Zeile bzw. in einer Spalte gedacht. CSS Flex ist der flexible Nachfolger von CSS float.

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