li-Boxen rechtsbündig ausrichten

[Stefan E.]

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.

[beatovich]

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;
}

[Stefan E.]

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.

[Gunnar Bittersmann]

@@Stefan E.

Vielleicht muss ich mal meine CSS-Kenntnisse aktualisieren 😉

Flexbox Froggy 🐸

LLAP 🖖