Flexbox: Zentrieren per margin und per justify-content/align-items
Geschrieben am:
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.
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.
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.