Stefan E.: li-Boxen rechtsbündig ausrichten

problematische Seite

Hallo,

unter http://jsfiddle.net/cn8Lefdj/25/ habe ich ein einfaches Beispiel gebastelt. Ich formatiere eine li-Liste mit CSS in einzelne Boxen um, welche innerhalb eines Bereiches nebeneinander dargestellt werden. Wenn der Platz nicht ausreicht, dann werden diese automatisch umgebrochen. Allerdings möchte ich gern, das die roten Boxen (in dieser Anordnung) komplett auf die rechte Seite der blauen Box rücken. D.h. der aktuell breite blaue Rand soll links der roten Boxen sein und rechts nur noch die festgelegten 10px.

Eine andere Breite der blauen Box ist nicht möglich, da diese später abhängig von der Viewport-Breite festgelegt wird (z.Bsp. 20 vw).

Viele Grüße, Stefan E.

PS: Ob Box 9 (also die jeweils letzte Zeile) von rechts nach links oder links nach rechts gefüllt wird, ist nicht so wichtig. Vermeiden möchte ich nur den zu breiten blauen Rand insgesamt auf der rechten Seite. Allerdings ist float:right; nicht möglich, da die Reihenfolge der Boxen nicht verändert werden kann.

  1. problematische Seite

    hallo

    Hallo,

    unter http://jsfiddle.net/cn8Lefdj/25/ habe ich ein einfaches Beispiel gebastelt. Ich formatiere eine li-Liste mit CSS in einzelne Boxen um, welche innerhalb eines Bereiches nebeneinander dargestellt werden. Wenn der Platz nicht ausreicht, dann werden diese automatisch umgebrochen. Allerdings möchte ich gern, das die roten Boxen (in dieser Anordnung) komplett auf die rechte Seite der blauen Box rücken. D.h. der aktuell breite blaue Rand soll links der roten Boxen sein und rechts nur noch die festgelegten 10px.

    Eine andere Breite der blauen Box ist nicht möglich, da diese später abhängig von der Viewport-Breite festgelegt wird (z.Bsp. 20 vw).

    Viele Grüße, Stefan E.

    lösche float

    ul { padding: 0; margin: 0; display:flex; flex-flow:row wrap; justify-content:right; } li { display: block; background: red; height: 50px; width: 50px; margin: 10px; flex:0 0 auto; } -- https://beat-stoecklin.ch/pub/index.html
    1. problematische Seite

      Besten Dank, http://jsfiddle.net/cn8Lefdj/32/ funktioniert wunderbar.

      Hatte mir gerade noch http://jsfiddle.net/cn8Lefdj/29/ gebastelt, was wohl nicht viel anders funktioniert, aber Deine Lösung ist da natürlich eleganter. Vielleicht muss ich mal meine CSS-Kenntnisse aktualisieren 😉

      Danke + MfG, Stefan E.

      1. problematische Seite

        @@Stefan E.

        Vielleicht muss ich mal meine CSS-Kenntnisse aktualisieren 😉

        Flexbox Froggy 🐸

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann