Funktionsweise von display: inline-flex
Geschrieben am:
Zur Aktivierung der Flexbox-Darstellung nimmt man display: flex oder display: inline-flex. Was von beiden man wählt, hat keine Auswirkung auf die Darstellung des Flexitems, sondern darauf, wie sich der Flexcontainer zu den umgebenden Elementen verhält. Mit display: flex verhält sich der Flexcontainer im Wesentlichen wie ein Blockelement, hingegen mit display:inline-flex eher wie ein Inline-Element.
Gut sieht man den Unterschied, wenn man Text neben dem Flexcontainer platziert:
Hier einmal display: flex:
Und hier display: inline-flex:
Zwei Fragen stellen sich dabei - danke an die Teilnehmer meines Flexbox-Workshops auf den HTML5Days Oktober 2016 in Berlin!
Warum ist der Text bei der inline-flex-Darstellung im Beispiel so schön zentriert?
Der Text befindet sich auf derselben Baseline wie der Text innerhalb der Flexcontainers. Im Beispiel sind die Flexitems über padding etwas höher, wenn man dieses padding entfernt, sieht man schön, wie die eben auf "einer Linie" sind - was auch zu Inline-Elementen passt.
Wie wird Leerraum zwischen Inline-Flex-Containern behandelt?
Von display: inline-block kennt man das Problem, das Leerzeichen zwischen per display: inline-block dargestellten Elementen auch im Browser auftauchen. Gibt es das Problem auch, wenn mehrere Elemente mit display: inline-flex nebeneinander angeordnet werden?
Ein Text zeigt es deutlich: Ja, dasselbe Phänomen beobachtet man auch.
Jetzt aber zur Erklärung. Erst einmal ist die Behandlung von Weißraum bei display: inline-block eigentlich kein Bug, sondern ein Feature. Wenn wir Inline-Elemente haben wie beispielsweise zwei Links hintereinander ...
<a href="...">Eins</a> <a href="...">Zwei</a>... dann erwarten wir ja, dass der Leerraum auch angezeigt wird - das ist das normale Verhalten von Inline-Elementen.
Inline-block-Elemente zeigen dieses Verhalten von Inline-Elementen - und bei Inline-flex-Elementen ist es genauso.
Die Beispiele gibt es auch zum Live-Austesten (mit den per Autoprefixer erzeugten CrossBrowser-Code):