letzte Reihe im Flexbox konstrukt ändern

[bugfix]

Moin zusammen,

ich habe mir eine FlexBox zusammen gebastelt, so weit, so gut. Leider erstreckt sich die letzte Zeile immer über die gesamte Breite des Containers, (flex:auto) egal wie viele Kacheln gerade in der letzten zeile vorhanden sind (abhängig von der Bildschirmbreite)...

Leider habe ich nicht heraus gefunden wie ich der Box erklären kann, dass sie die Bilder aufreiht, entsprechend der verfügbaren Breite (wie Text) umbricht und in der letzten Zeile einfach aufhört ohne die Bilder über die ganze breite zu strecken...

hat jemand eine Idee?

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

[Rolf B]

Hallo bugfix,

das liegt am flex-grow der Flexkinder (versteckt in deinem flex:auto). Dadurch passen sich die Kinder in der Breite so an, dass sie die Breite des Containers ausfüllen.

Mit flex-grow:0 (oder flex: 0 1 auto) bleiben sie auf einer Breite. Dafür hast Du dann einen variablen rechten Rand.

Ob Du mit display:grid besser klarkommst, weiß ich nicht. Es gibt zwar Auto-Placement im Grid, aber ob eine variable Anzahl von Zeilen UND Spalten geht, weiß ich nicht.

Rolf

[Gunnar Bittersmann]

@@bugfix

Leider habe ich nicht heraus gefunden wie ich der [FlexBox] erklären kann, dass sie die Bilder aufreiht, entsprechend der verfügbaren Breite (wie Text) umbricht und in der letzten Zeile einfach aufhört ohne die Bilder über die ganze breite zu strecken...

Gar nicht.

hat jemand eine Idee?

Nicht Flexbox verwenden, sondern Grid.

☞ Flexbox vs. Grid

LLAP 🖖

[Der Martin]

Hallo,

Leider habe ich nicht heraus gefunden wie ich der Box erklären kann, dass sie die Bilder aufreiht, entsprechend der verfügbaren Breite (wie Text) umbricht und in der letzten Zeile einfach aufhört ohne die Bilder über die ganze breite zu strecken...

aber das wäre doch dann das "ganz normale" Verhalten von Inline-Elementen.

hat jemand eine Idee?

Ja: Die Bilder einfach fortlaufend notieren, wie Text. Kein flex, kein grid, kein sonstiges Brimborium.
Eventuell eine Liste (ol? ul?) als gruppierendes Element, dann die li-Elemente als inline oder inline-block formatieren.

Denn wenn man so unspektakuläre Wünsche hat, kann auch die Lösung manchmal sehr trivial sein.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Denn wenn man so unspektakuläre Wünsche hat,

Der unspektakuläre Wunsch besteht darin, dass eine Anzahl von Items (Bilder in dem Fall) die Breite eines Containerlements voll ausfüllen soll, wobei die Items eine gewisse Minimalbreite bzw. Maximalbreite haben.

kann auch die Lösung manchmal sehr trivial sein.

Bei fester Breite der Items, ja. Dann müsste man aber seine Wünsche zurückschrauben.

LLAP 🖖

[Der Martin]

Hi,

Denn wenn man so unspektakuläre Wünsche hat,

Der unspektakuläre Wunsch besteht darin, dass eine Anzahl von Items (Bilder in dem Fall) die Breite eines Containerlements voll ausfüllen soll, wobei die Items eine gewisse Minimalbreite bzw. Maximalbreite haben.

davon steht im OP von Torsten nichts. Nur, dass in der letzten Zeile die Breite nicht ganz ausgereizt werden soll. Für mich ist das das normale Textfluss-Verhalten von Inline Content.

kann auch die Lösung manchmal sehr trivial sein.

Bei fester Breite der Items, ja. Dann müsste man aber seine Wünsche zurückschrauben.

Ähm, nein: Das funktioniert auch, wenn die alle ihre individuelle Breite haben. Wie bei einer Proportionalschrift (bzw. einem Text mit unterschiedlich langen Wörtern).

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

davon steht im OP von Torsten nichts.

Siehe verlinkte problematische Seite.

LLAP 🖖

[bugfix]

Moin Gunnar,

ich vergaß wohl zu erwähnen, das mir der Rest der Seite so gefällt wie er ist und es nur und ausschließlich um den Inhalt der letzten Zeile geht... wie schon erwähnt liegts an meiner Beschreibung.

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

[Der Martin]

Hallo Gunnar,

davon steht im OP von Torsten nichts.

Siehe verlinkte problematische Seite.

dann bin ich wohl schwer von Begriff. Da sieht es doch exakt so aus, wie ich Torstens Wunschvorstellung verstehe: Die Bilder sind zeilenweise angeordnet, und die letzte Zeile (die bei mir nur noch ein Bild enthält) ist nach links ausgerichtet und lässt den übrigen Platz rechts frei.

Auch wenn ich die Fenstergröße verändere ... die ein oder zwei Bilder der letzten Zeile sind linksbündig, der überschüssige Platz daneben bleibt frei (FF72 bzw. Pale Moon 28.8.2).

Ob die Bilder nun intrinsisch alle gleich groß sind oder nur auf gleiche Größe skaliert wurden, habe ich nicht näher untersucht.

Ciao,
 Martin

[bugfix]

Moin Martin,

Siehe verlinkte problematische Seite.

dann bin ich wohl schwer von Begriff.

Ich denke eher nicht, weil du etwas anderes zu sehen scheinst wie andere...

Da sieht es doch exakt so aus, wie ich Torstens Wunschvorstellung verstehe: Die Bilder sind zeilenweise angeordnet,

das ist korrekt...

und die letzte Zeile (die bei mir nur noch ein Bild enthält) ist nach links ausgerichtet und lässt den übrigen Platz rechts frei.

das ist bei mir anders, bei mir sind die items zentriert... linksbündig wär das was ich mir wünschte... trotzdem soll der Rand rechts und links der Bilderwnd gleich groß sein.

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

[Der Martin]

Moin,

Da sieht es doch exakt so aus, wie ich Torstens Wunschvorstellung verstehe: Die Bilder sind zeilenweise angeordnet,

das ist korrekt...

und die letzte Zeile (die bei mir nur noch ein Bild enthält) ist nach links ausgerichtet und lässt den übrigen Platz rechts frei.

das ist bei mir anders, bei mir sind die items zentriert...

im Moment sitze ich an einer Büchse mit Windows 10, und tadaaa! Hier sieht es in Firefox (73) und Pale Moon (28.8) so aus, wie du es beschreibst: Letzte Zeile zentriert.
Die gleichen Browser auf meiner Linux-Büchse zuhause zeigen es wie gewünscht an: Letzte Zeile linksbündig.

Windows macht den Unterschied, scheint mir.

Issjanding!

Ciao,
 Martin

[bugfix]

Moin Der,

Moin,

Da sieht es doch exakt so aus, wie ich Torstens Wunschvorstellung verstehe: Die Bilder sind zeilenweise angeordnet,

das ist korrekt...

und die letzte Zeile (die bei mir nur noch ein Bild enthält) ist nach links ausgerichtet und lässt den übrigen Platz rechts frei.

das ist bei mir anders, bei mir sind die items zentriert...

im Moment sitze ich an einer Büchse mit Windows 10, und tadaaa! Hier sieht es in Firefox (73) und Pale Moon (28.8) so aus, wie du es beschreibst: Letzte Zeile zentriert.
Die gleichen Browser auf meiner Linux-Büchse zuhause zeigen es wie gewünscht an: Letzte Zeile linksbündig.

Windows macht den Unterschied, scheint mir.

neeee, ich glaube Torsten macht den Unterschied, bestimmt hab ich geändert während du geschaut hast oder so...

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

[Rolf B]

Hallo Martin,

das kann eigentlich nicht sein. Bist Du sicher, dass Du beidesmal die gleiche Version der Seite mit letztem Stand (ohne Cache-Relikte) gesehen hast?

Ein display:flex mit flex-flow: row wrap und justify-content:center sollte die letzte Zeile zentrieren. Da würde es mich sehr wundern, wenn sie linksbündig ist.

Was Torsten offenbar noch nicht probiert ist, ist justify-content:center mit Grid. Das hatte Gunnar in seinem Codepen auch nicht drin (weil er volle Breite und flexible Elemente hatte). Jedenfalls danke@gunnar für auto-fill.

Das hier funktioniert bei mir so wie gewünscht, mit statischer Bildbreite:

  display: grid;
  grid-template-columns: repeat(auto-fill, 5em);
  justify-content: center;

Edit: Das hier auch, man muss die Breite der grid-children auf 100% setzen, dann passen sie sich an die Breite an. Die letzte Zeile bleibt linksbündig. Einen Abstand zum Fensterrand bekommt man mit einem Margin am Grid-Container.

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
  justify-content: center;

Das Grid hat die volle Bildschirmbreite, aber die Tracks sind zentriert und da die Bilder in den Tracks liegen, ist die letzte Reihe linksbündig.

Rolf

[Der Martin]

Hallo,

Bist Du sicher, dass Du beidesmal die gleiche Version der Seite mit letztem Stand (ohne Cache-Relikte) gesehen hast?

nein, bin ich nicht. Das eine war gestern abend (Linux), das andere jetzt eben (Windows). Gut möglich, dass Torsten dazwischen etwas geändert hat.

Cache-Effekte kann ich aber ausschließen: Es sind zwei völlig unterschiedliche PCs, und in beiden Browsern auf beiden Maschinen habe ich die Seite zum ersten und einzigen Mal aufgerufen.

So long,
 Martin

[bugfix]

Moin Rolf,

Was Torsten offenbar noch nicht probiert ist, ist justify-content:center mit Grid. Das hatte Gunnar in seinem Codepen auch nicht drin (weil er volle Breite und flexible Elemente hatte). Jedenfalls danke@gunnar für auto-fill.

Das hier funktioniert bei mir so wie gewünscht, mit statischer Bildbreite:

…

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
  justify-content: center;

Doch, genau das benutze ich auf meiner Seite jungmann.photo die Flexbox ist nur für den ollen IE... (10+11)

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

[Rolf B]

Hallo bugfix,

ach ja. Da war was. Aber dann ist's halt so. Flexbox kann das nicht was Du brauchst, und einen JavaScript-Fallback willst Du bestimmt nicht basteln 😉

Rolf

[bugfix]

Moin Rolf,

ach ja. Da war was. Aber dann ist's halt so. Flexbox kann das nicht was Du brauchst...

dann bleibts eben so :) danke für die Hilfe!

und einen JavaScript-Fallback willst Du bestimmt nicht basteln 😉

hier treffen Schwäche des Geistes und des Willens auf mangelnde Notwendigkeit, kurz gesagt: Auf gar keinen Fall!

gg

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

[Gunnar Bittersmann]

@@bugfix

und einen JavaScript-Fallback willst Du bestimmt nicht basteln 😉

hier treffen Schwäche des Geistes und des Willens auf mangelnde Notwendigkeit, kurz gesagt: Auf gar keinen Fall!

Auch ein starker Geist würde hier keinen JavaScript-Fallback basteln.

Nur ein mittelmäßig ausgeprägter Geist würde das tun. Und das wär dann halt … mittelmäßig.

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf B

Flexbox kann das nicht was Du brauchst

Nein, nicht „brauchst“, sondern vielleicht „willst“.

Er braucht nicht mehr als Flexbox kann; das ist gut genug für IE.

LLAP 🖖

[bugfix]

Moin zusammen,

@Rolf B

Mit flex-grow:0 (oder flex: 0 1 auto) bleiben sie auf einer Breite. Dafür hast Du dann einen variablen rechten Rand.

...danke sehr, geht prima! Aber dieser unschöne rechte Rand stört mich, hab versucht das Geschoss mit margin: 0 auto; in die Mitte zu rücken, das ist aber scheinbar nicht die Lösung...

Ob Du mit display:grid besser klarkommst, weiß ich nicht. Es gibt zwar Auto-Placement im Grid, aber ob eine variable Anzahl von Zeilen UND Spalten geht, weiß ich nicht.

aus display:grid; besteht das eigentliche Gerüst der Seite, gefällt mir auch wesentlich besser, da sich alles flexibel anpasst, funktioniert aber leider nicht im IE, die Flexbox soll auch nur ein Fallback für Browser die das grid nicht verstehen (IE10 & 11 und ein paar alte webviewer in Smartphone OS) sein.

Der IE ist tot kommt jetzt, jein da MS den IE noch bis Okt2025 supportet (Ende von WIN10) und viele große Firmen am IE festhalten weil der ganze Businessquatsch darauf getrimmt ist.

@Gunnar Bittersmann

Gar nicht.

...gar nicht gibts doch gar nicht. 😉

@Der Martin

mit display:block; gehts natürlich auch, aber gleiches Problem wie oben, der blöde Rand...

vermutlich hab ich mich mal wieder nicht klar genug geäußert...

neue Frage: wie bekomm ich den Schnoddel zentriert

Früher hat man mal ein unsichtbares div in der Seite versteckt und dann das nächte div minus 50% dazu platziert, das ist glaub ich nicht mehr up to date und geht hier auch nicht weil der Rand ja im Flexcontainer ist... grübel

der torsten

[Gunnar Bittersmann]

@@bugfix

[Grid] funktioniert aber leider nicht im IE, die Flexbox soll auch nur ein Fallback für Browser die das grid nicht verstehen (IE10 & 11 und ein paar alte webviewer in Smartphone OS) sein.

Na dann funktioniert es doch! Do websites need to look exactly the same in every browser?

LLAP 🖖

[Der Martin]

Hallo Torsten (ohne 'h'),

@Der Martin

mit display:block; gehts natürlich auch, aber gleiches Problem wie oben, der blöde Rand...

ich schrieb ja auch: inline oder inline-block, wenn das Elternelement ein li ist.
Dann verhalten sich die li mit den Bildern drin wie Text, und die in der letzten Zeile orientieren sich nach links und lassen den überschüssigen Platz rechts frei. Das war es doch, was du wolltest, oder nicht?

neue Frage: wie bekomm ich den Schnoddel zentriert

Ergänzend zu meinem Ansatz: text-align:center.

Früher hat man mal ein unsichtbares div in der Seite versteckt und dann das nächte div minus 50% dazu platziert, das ist glaub ich nicht mehr up to date und geht hier auch nicht weil der Rand ja im Flexcontainer ist...

Schon bei der Vorstellung kriege ich Gänsehaut.

So long,
 Martin

[bugfix]

Ihr lustiges Völkchen, ihr,

@Gunnar Bittersmann

Na dann funktioniert es doch! Do websites need to look exactly the same in every browser?

It would be exceedingly gratifying if you could and did not need to! (dotcom)

@Der Martin

Das war es doch, was du wolltest, oder nicht?

zunächst mal ja, ich wollte aber auch nicht gleich mit der Tür ins Haus fallen...

Ergänzend zu meinem Ansatz: text-align:center.

Zu gunsten eines schmalen html und css hab ich auf Listenformatierung u.ä. verzichtet... nicht zuletzt hat @Matthias Scharwies daran einen sehr großen, wenn nicht sogar den vollständigen Anteil. Ich würde das nur ungern verschlimmbessern in dem ich jetzt alles wieder vollbastel...

passend zum Thema:

Hallo Torsten (ohne 'h')

meine Eltern haben das unnötige halt auch weggelassen...

😉

Schon bei der Vorstellung kriege ich Gänsehaut.

Hoffentlich in freudiger Erregung?

@all

Mit justify-content: center; schiebt sich alles schön mittig, leider auch die letzte Zeile...

Danke schon mal im Voraus & auf Wiederlesen!

der torsten