Flexbox Modell vertikal / horizontal

    Hallo Leute,

    ich habe für eine Modelagentur eine Page erstellt, wo 200-300 Modelfotos in einer Flexbox Darstellung vertikal in 6 Spalten angezeigt werden. Wenn der Monitor schmäler ist, springt die Anzeige per Media Query von 6 auf 3 und dann auf 2 Spalten um, damit die Fotos nicht zu klein werden. Ich habe eine simple Variante davon als Testfile hinterlegt unter
    http://www.rachbauer.org/visage/neu/tstcol.html


    Das Problem dabei ist, dass der Seitenaufbau spaltenweise durchgeführt wird, d.h. erst sieht man die erste Spalte füllen, dann die 2. Spalte, usw. Der Kunde möchte aber, dass die Darstellung zeilenweise aufgebaut wird. Dafür habe ich Flexbox auf horizontal umgestellt und dies in einer simplen Variante als Testfile hinterlegt
    http://www.rachbauer.org/visage/neu/tstrow.html


    Dabei habe ich die neuen FlexBox Styles zur Vereinfachung ins HTML-File geschrieben. Der Aufbau der Seite läuft auch schön zeilenweise durch (Shift/Reload). Kann ich die Spalten nun trotzdem noch von 6 auf 3 und auf 2 reduzieren, ohne die Seite nochmal neu aufbauen zu müssen. Wie läßt sich sowas lösen? Es sollte dann so ablaufen wie unter

    http://www.20management.co.za/portfolio/women/mainboard oder

    https://www.metromodels.com/main/


    Dort werden die Fotos auch zeilenweise angezeigt und die Spalten reduzieren sich je nach Monitorbreite.

    Selbstverständlich ist das auch bei der zweiten Variante tstrow.html möglich. Du hast es dir nur verbaut, indem Du schon im HTML die Bilder in Sechsergruppen gruppiert hast. Ordne einfach die Bilder hintereinander an, ohne das span.gallery-column, lasse für Flex das Wrapping zu und ordne den figure-Containern ein min-width zu, dann wird Flex die Zeilen automatisch passend umbrechen.


    Edit: Statt mit min-width kannst Du die Breite auch mit Flex festlegen:

    Code
    flex-basis: 300px;
flex-grow: 1;
flex-shrink: 0;


    Aber auch mit Gridlayout geht das sehr gut. Versuche dieses CSS:

    Code
            span.gallery-fotos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }


    Ein Unterschied bei beiden Varianten besteht darin, dass bei Grid bei einer unvollständigen Zeile die restlichen Bilder links angeordnet sind, während man sie bei Flex auch zentrieren kann.


    Bei beiden Varianten funktioniert das responsive Verhalten schon ohne eine Mediaquery.

    Zitat von lagraf

    ich habe für eine Modelagentur eine Page erstellt, wo 200-300 Modelfotos in einer Flexbox Darstellung vertikal in 6 Spalten angezeigt werden.

    Du denkst viel zu sehr in Spalten und Zeilen was sich auch in deinem Quelltext widerspiegelt. Alle span- und div-Elemente die du hast sind überflüssig (bzw. falsch, span darf kein div enthalten). Entferne sie ersatzlos und verwende dann ein grid-Layout indem du definierst wie groß jedes Bild mindestens sein soll - den Rest (das Verteilen der Bilder in die Zeilen bzw. die Entscheidung wieviele Bilder in eine Zeile passen) überlässt du einfach dem Browser.

    Sempervivum: Ich habe den flex Ansatz jetzt weiter reduziert und alles Überflüssige mal rausgenommen (gallery-column, div), die Styles sind jetzt auch ausschließlich intern. Das Ergebnis schaut dann so aus:

    http://www.rachbauer.org/visage/neu/tstrow1.html


    Folgendes funktioniert jedoch nicht wenn der Monitor schmäler wird:

    • Zuerst soll Abstand zwischen den Fotos bis 10px schrumpfen bevor die Fotos schrumpfen
    • Dann sollen die Fotos bis 180px schrumpfen bevor die Spalten reduziert werden
    • Es gibt auch kleinere Fotos (z.B. Alina), die sollen auf die gleiche Größe wie die anderen vergrößert werden sodaß alle gleich groß sind, sodaß eine saubere tabellarische Darstellung erfolgt
    • Die Spaltenanzahl soll auf max. 6 Spalten und min. 2 Spalten (fürs Handy) festgelegt werden

    Wie kann man diese Forderungen am Besten realisieren?

    Welche Darstellungsart (Grid / Flex) würde sich dafür besser eignen?

    Die letzte Anforderung mit der Spaltenanzahl spricht dafür, ein Grid zu verwenden, weil Du dann die Anzahl der Spalten explizit festlegen kannst. Während dies bei Flex mehr implizit durch die Umbrüche geschieht und komplizierter zu steuern ist. Das würde zwar einige Mediaqueries erfordern aber eine Zahl von 4 wäre noch vertretbar. Ich habe es jetzt nicht ausgearbeitet, versuche es selbst.

    Ich denke dass ich den Kunden dazu überreden kann, dass er nicht auf das Maximum von 6 Spalten besteht.

    Läßt sich das Minimum von 2 Spalten mit Flex realisieren?

    Können die anderen Anforderungen erfüllt werden?

    :D Mit den Beiträgen unseres m.scatello bin ich nicht immer einverstanden, aber in diesem Fall teile ich seine Auffassung: Durchaus fragwürdig, wenn ein Fragesteller durchblicken lässt, dass er die Webentwicklung professionell betreibt (und dafür seinen Kunden einen u. U. vierstelligen Betrag in Rechnung stellt) und sich dann im Forum kostenlosen Support holt. In einem solchen Fall wäre es angemessen, einen Supporter oder Partner zu suchen und diesen anständig zu bezahlen. Dieser Thread ist nicht das einzige Beispiel und i. allg. halte ich mich dann heraus, wenn so etwas offensichtlich ist.

    Ich wollte damit nur verhindern dass ich mich in eine Richtung verrenne, wo ich viel Zeit investiere, wo es aber schlussendlich dann in einer Sackgasse endet. Ein Tip in die richtige Richtung würde da schon eine Menge Zeit ersparen. Oder ein "geht so" oder "geht so nicht".


    Bezahlen kann ich schon etwas für die Arbeit aber dann erwarte ich auch ein funktionierendes Grundgerüst, auf das ich dann aufbauen kann. Wer Lust hat kann ja ein Angebot stellen, ich gebs dann an den Kunden (= Schwager) weiter, nur in dem Fall ist es mit dem vierstelligen Betrag ein wenig zu hoch gegriffen.

    Noch was:

    Die jetzige Lösung mit flex column funktioniert einwandfrei. Nur stört MICH daran, dass der Aufbau der Seite Spalte für Spalte erfolgt. Für mich ist es logischer, dass dies zeilenweise geschieht. Wenn ich daran also etwas ändere, dann bekomme ich dafür genau € 0,-

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden