CSS display:flex – Ausrichten und Platzieren

display flex und inline-flex

display:flex bzw. display: inline-flex sind elegante Lösungen für das Ausrichten benachbarter Elemente. Das Zentrieren von Elementen kostet mit display:flex / inline-flex gerade mal eine Zeile.

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

Ob flex oder inline-flex – flex hat keinen Einfluss auf die Ausrichtung der Elemente in einer Flexbox, sondern regelt nur, wie sich Flex-Elemente gegenüber benachbarten Elementen verhalten. Es spricht aber nichts dagegen, Blöcke innerhalb eines Flex-Containers selber zu Flex-Containern zu machen.

Picossi

1929 - 1999

Enim eiusmod high life mainus Picasso ad squid. Spainsdomus high noon officia.

Büccioni

1962 - 2009

Flooter boot quinoa rasant eiusmod. Boccioni nelle la protection des données de l'entreprise.

Mindirane

1919 - 2000

Lorsque vous visitez notre site Mondrian occu luomi tapesteri accidental.

.flex-box {
	display:flex; 
	justify-content: space-around;
}
.flex-box > div {
	display: flex;
	flex-direction: column;
	align-items:center;
}

Alle modernen Browser beherrschen display: flex.

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:

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 in einer Zeile 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.

gap

Später mit hinzugekommen: Endlich den Abstand zwischen Flexboxen ohne margin festlegen

row-gap

Abstand zwischen Flex-Zeilen

column-gap

Abstand zwischen Flex-Spalten

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)

Flexblöcke ausrichten

Die Eigenschaften display:block und display:inline-block kennen wir schon aus älteren CSS-Versionen. display:flex und display: grid kamen erst später in CSS an.

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.

Syntax

display : flex

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.

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.

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.

Syntax

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

align-items

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

Syntax

align-items : flex-start
align-items : flex-end
align-items : center
align-items : stretch
align-items : 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;
}

Syntax

align-content : flex-start
align-content : flex-end
align-content : center
align-content : space-between
align-content : space-around
align-content : 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 und ist die schmerzfreie Alternative zu CSS float. Flex setzt zwei, drei Blogbeiträge in saubere Zeilen je nach Platzangebot im Browserfenster.

CSS Grid ist ein Layout-Raster – ähnlich dem alten Tabellen-Layout – in Zeilen und Spalten und die beste Grundlage für ein modernes Layout der Webseite.

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. Und auch wenn IE11 noch mit einer alten Syntax für das Grid-Layout und einem geringen Funktionsumfang viel Schreibaufwand mitbringt, können sowohl Flex als auch Grid heute im Design und Layout von Webseiten eingesetzt werden.