keine JavaScript- und keine Bildschirmbreiten-Medienabfragen
Ich versuche, einen css-only Weg zu finden, um die Situation zu erreichen, die im unteren Bild dargestellt ist. Ich konnte keinen Weg finden, Folgendes zu erstellen:
Ich habe mit mehreren Strategien experimentiert, ohne Erfolg, ich habe das Gefühl, dass flexbox helfen könnte, aber ich bin nicht sehr erfahren mit flexbox und konnte keinen Weg finden, es zu benutzen.
Ein paar Dinge, die ich versucht habe:
UPDATE: Ich habe eine (weniger) Geige gemacht, die funktioniert, wenn die Breiten der Elemente fest und gleich sind. Leider feste Breite, also noch nicht was ich erreichen möchte. Wenn du mir helfen willst, könntest du das vielleicht als Ausgangspunkt benutzen. Ich habe den Inhalt in a: vorher könnte es vielleicht das Element überlaufen und irgendwie die Elementbreite auf auto fixieren.
zur Zeit nur CHROME: Ссылка
html:
%Vor%weniger:
%Vor%LINK ZUR ANTWORT: Ссылка funktioniert nicht im Internet Explorer, aber ich nehme an, dass es in Edge funktioniert. Wenn jemand einen Weg finden kann, um es im IE zu arbeiten, werde ich sehr daran interessiert sein zu wissen
Eine Möglichkeit, Ihre Ausgabe mit der flex box zu erhalten.
Machen Sie die Flexbox so schmal, dass jedes Kind passt. Das zwingt die Kinder, hintereinander zu gehen.
Fügen Sie vor dem ersten untergeordneten Element ein Pseudoelement hinzu, um einen zusätzlichen Rand zu erzwingen.
Justieren Sie den Flex nach Bedarf
Und leg den Flex nach rechts, denn jetzt ist alles links.
Die Elemente sind farbcodiert, um leicht zu sehen, was passiert