CSS display:flex – Ausrichten und Platzieren

CSS display flex

display:flex und display:inline-flex positionieren Elemente in Zeilen bzw. Spalten und verteilen den freien Raum mit justify und align-items – wie das Ausrichten und Verteilen von Elementen im Grafikprogramm.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

art-picasso

Picossi

1929 - 1999

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

art-boccioni

Büccioni

1962 - 2009

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

art-boccioni

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:

Verteilung der flex-Elemente auf horizontaler / vertikaler Achse
Zeilenorientierte Verteilung (flex-direction:row)

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
Frisch eingetroffen: 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.

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

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

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

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

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

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.

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