Flexbox: Elemente intelligent ausblenden mit visibility: collapse
Geschrieben am:
Bei Flexbox passen sich die Elemente aneinander an - aber was ist, wenn Elemente temporär ausgeblendet werden … und die umgebenden Elemente sich trotzdem daran anpassen sollen?
In diesem Fall hilft visibility: collapse.
Die Eigenschaft visibility steuert – wenig überraschend – die Sichtbarkeit von Elementen. Mit visibility: hidden ist ein Element ausgeblendet. Ein Element lässt sich ebenfalls mit display: none ausblenden. Einen entscheidenden Unterschied gibt es jedoch zwischen den beiden: Wenn man ein Element mit visibiliy: hidden ausblendet, ist es zwar unsichtbar, aber der Platz, den es eigentlich einnehmen würde, ist immer noch reserviert. Bei display ist das nicht der Fall.
Die Eigenschaft visibility hat neben den bekannten Werte visible und hidden auch noch den weniger bekannten Wert collapse. Und dieser ist gerade bei Flexbox praktisch, denn damit können wir dafür sorgen, dass auch wenn Elemente eingeklappt sind, doch ihre Ausmaße herangezogen werden. Damit kommt es nicht zu unschönen Verschiebungen, wenn die Elemente ausgeklappt werden.
Ein/Ausklappen mit display: none - der linke Bereich hat unterschiedlichen Breiten je nachdem, ob die Unterelemente ausgeklappt sind oder nicht:
Ein/Ausklappen mit visibility: collapse - hier verändert der linke Bereich seine Breite nicht.
Das Beispiel basiert auf dem vom W3C in der Spezifikation gezeigten Beispiel.
Live testen:
- mit
display: none(über “Projects” mit der Maus fahren, um die Unterpunkte anzeigen zu lassen) - mit
visibility: collapse(über “Projects” mit der Maus fahren, um die Unterpunkte anzeigen zu lassen)