Flexbox: Zentrieren per margin und per justify-content/align-items

Bei der Verwendung von Flexbox gibt es bekanntlicherweise zwei Arten, Elemente zu zentrieren. Man kann margin beim zu zentrierenden Element einsetzen oder mit justify-content/align-items hantieren. Bisher dachte ich, dass beide sich nur in der Browserunterstützung unterscheiden, aber es gibt einen anderen wesentlichen Unterschied zwischen beiden – der sich zeigt, wenn der Viewport kleiner ist als das zu zentrierende Element.

Sehen wir uns noch einmal die Zentrierungsmöglichkeiten an: Bei der ersten Option werden justify-content/align-items beim Flexcontainer notiert.

body {
display: flex;
justify-content: center;
align-items: center;
}

Zentrieren mit justify-content/align-items: ausprobieren

Tipp: Im  Beispielcode zeige ich immer nur die Standardeigenschaft. Für den echten Einsatz sollten zusätzlich die Angaben für ältere Browser geschrieben werden (in den verlinkten Beispielen ist dieser Code bereits ergänzt). Am einfachsten nimmt man dafür Autoprefixer.

Die andere sieht so aus, dass man beim umfassenden Element die Flexboxdarstellung aktiviert und dann beim Element, das zu zentrieren ist, d.h. beim Flexitem, margin: auto ergänzt:

body {
display: flex;
}
.zentriert {
margin: auto;
}

Zentrieren mit margin: ausprobieren

Was aber ist der Unterschied zwischen beiden Möglichkeiten? (auf die Browserunterstützung gehe ich gleich noch ein). Ein wesentlicher Unterschied wird erkennbar, wenn man ein Element innerhalb des Viewports zentriert und wenn der Viewport kleiner ist als das zu zentrierende Element. Dann zeigt sich folgendes Bild bei der Verwendung von justify-content/align-items:

Zentrierung mit justify-content/align-items: Die obere linke Ecke des Elements wird abgeschnitten und ist auch durch die Scrolleisten nicht erreichbar.

Flexbox-Zentrierung: die obere linke Ecke ist abgeschnitten

Beim Ausprobieren unbedingt das Browserfenster ganz klein ziehen oder in den Entwicklertools die entsprechende Option wählen!

Dieses unpraktische Verhalten zeigt sich nicht, wenn man die Zentrierung mit margin vornimmt: Man sieht die obere linke Ecke des Elements und kann durch Scrollbalken auch den Rest erreichen.

Flexbox-Zentrierung: obere linke Ecke ist zu sehen

Beim Ausprobieren unbedingt das Browserfenster ganz klein ziehen oder in den Entwicklertools die entsprechende Option wählen!

Damit wäre die Aufteilung klar:

  • margin ist die bessere Wahl, wenn es um die Zentrierung großer Bereiche geht, wo die Gefahr besteht, dass sie größer sind als der Viewport.
  • Wenn es hingegen um die Zentrierung von kleineren Komponenten geht – wie beispielsweise die Anordnung von Icons auf Buttons oder Ähnlich, kann problemlos auch die Zentrierung mit align-items/justify-content gewählt werden.

Kommen wir nun zur Browserunterstützung. Ein Wehmutstropfen gibt es bei der Zentrierung per margin: der Internet Explorer 10 und 11 spielt nicht mit.

Aber auch dafür gibt es eine Abhilfe – man spendiert dem umfassenden  Container ein flex-direction: column.

body {
display: flex;
flex-direction: column;
}
.zentriert {
margin: auto;
}

Über flex-direction bestimmt man normalerweise die prinzipielle Darstellungsart: mit flex-direction: row (Standard) werden die Elemente nebeneinander angeordnet, mit flex-direction: column untereinander. Wenn wir aber nur ein Element haben, das wir anordnen wollen, so macht es keinen Unterschied, ob wir flex-direction: row oder flex-direction: column wählen. Aber es hat den schönen Nebeneffekt, dass dann der IE auch mitspielt.

Funktioniert auch im IE10/11: Zentrieren per margin

 

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>