Artikel mit Schlagwort

So großartig Flexbox auch ist, was es im Hintergrund tut, ist tatsächlich ein wenig seltsam, denn standardmäßig tut es zwei Dinge gleichzeitig. Es betrachtet zuerst die Größe des Inhalts, was wir bekommen würden, wenn wir auf ein Element `width: max-content` deklarieren würden. Aber zusätzlich leistet `flex-shrink` auch Arbeit und erlaubt den Elementen, kleiner zu sein, aber nur, wenn es nötig ist. Lassen Sie uns diese beiden aufschlüsseln und sehen, wie sie zusammenarbeiten.

Wenn Sie eine CSS-Eigenschaft auf ein Element anwenden, geschehen viele Dinge im Hintergrund. Nehmen wir zum Beispiel an, wir haben etwas HTML wie dieses

<div class="parent"<div class="child"Child</div<div class="child"Child</div<div class="child"Child</div</div

…

Fun Fact: Es ist möglich, responsive Komponenten ganz ohne Media Queries zu erstellen. Sicherlich wären Container Queries sehr nützlich für responsives Design auf Komponentenebene. Aber wir haben keine. Trotzdem, mit oder ohne ...

Die kurze Antwort: `flex-shrink` und `flex-basis` sind wahrscheinlich das, wonach Sie suchen. …