Zeige alle Blogbeiträge

Zentrierung per Flexbox und der IE

 (Kommentare: 1) | Beitrag empfehlen auf 

Zentrierung per margin: auto funktioniert im IE nicht
Zentrierung per margin: auto funktioniert im IE nicht

Das Zentrieren von Elemente sowohl horizontal als auch vertikal ist mit der Flexbox theoretisch ganz einfach: margin:auto, und fertig. Der Internet Explorer versteht zumindest in der 11er-Version zwar Flexbox, hat aber diverse Bugs und so versteht er diesen in Kapitel 19 von Flexible Boxes beschriebenen Trick nicht. Er zieht das zu zentrierende Element einfach in die Länge, was etwas unschön aussieht (siehe Abbildung). 

Eine andere Methode zur Zentrierung von Elementen per Flexbox funktioniert mit den auf Seite 485 und 488 vorgestellten Eigenschaften justify-content und align-items. Diese Methode versteht auch der IE, und deshalb möchte ich sie ich in diesem Beitrag kurz vorstellen.

1. Zentrierung per margin:auto

Theoretisch ist die horizontale und vertikale Zentrierung per Flexbox total einfach. Eine Überschrift innerhalb von body kann man wie folgt zentrieren:

/* Zentrieren per Flexbox, funktioniert nicht im IE */ 

body { display: flex; } 

h1 { margin: auto }

Man könnte die Höhe von body noch definieren (min-height:100vh oder min-height:100%), aber in den meisten Browsern funktioniert das gut. Nur im IE nicht. Er versteht margin:auto nicht, egal in welcher Version.

Die Eigenschaften justify-content und align-item

Die beiden Eigenschaften justify-content und align-items ergänzen sich bei der Zentrierung perfekt:

  • justify-content zentriert die Flex-Items auf der Hauptachse und verteilt den Leerraum zu gleichen Teilen am Anfang und am Ende des Containers.
  • align-items zentriert die Flex-Items auf der Nebenachse und verteilt den Leerraum zu gleichen Teilen davor und danach.

Die folgende Abbildung zeigt das am Beispiel einer einfachen Navigation (Flexible Boxes, S. 486 und 488).

Die Eigenschaften justify-content und align-items
justify-content und align-items mit dem Wert center

Wenn man also für den Flex-Container beide Eigenschaften auf center setzt, werden Flex-Items auf Haupt- und Nebenachse zentriert. Works like a charm.

2. Zentrieren mit justify-content und align-items

Abhilfe schaffen die beiden Eigenschaften justify-content und align-items, die an den Flex-Container vergeben werden und im Buch auf Seite 485 und 488 vorher vorgestellt werden:

/* Zentrieren per Flexbox, funktioniert auch im IE */ 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

Das Ergebnis ist für das Beispiel dasselbe wie ein einfaches margin: auto, wird aber auch vom IE verstanden.

Zentrierung funktioniert auch im IE
Zentrierung funktioniert auch im IE

Kollegin Florence Maurice hat in Ihrem Blog einen lesenswerten Beitrag zu diesem Thema geschrieben:

Philip Walton von Google hat auf Flexbugs diverse Browserbugs bei der Umsetzung von Flexbox-Eigenschaften gesammelt.

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

Zeige alle Blogbeiträge

Kommentare

Kommentar von Florence Maurice |

Hallo Peter,
Danke fürs Verlinken meines Blogbeitrags :-)
Letztens habe ich mich noch mal mit dem Thema auseinander gesetzt und zwei interessante Dinge bemerkt:
zum einen verschwindet die linke obere Ecke bei justify-content/align-items, falls der Viewport kleiner ist als das zu zentrierende Element - es ist nämlich eine "echte" Zentrierung...
und zum anderen kann man den IE doch noch zu einerZusammenarbeit bei margin bewegen, indem man flex-directin: column einsetzt.
http://maurice-web.de/flexbox-zentrieren-per-margin-und-per-justify-contentalign-items/
Schöne Grüße
Florence

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.