Hallo
Zitat
im einfachsten Fall unterscheide ich zwischen PC und Handy: PC-Darstellung mit flex-direction:row, Handy mit flex-direction:column
Zitat
vermutlich: Handy, Tablet und PC
Nein. Diese Einteilung solltest du schnell und konsequent vergessen. Es gibt für Webseiten keine Handys, Smartphones, Tablets, Notebooks, PC und was auch immer.
Wie sich eine Webseite visuell verhält hängt nur von der zur Verfügung stehen Fensterbreite ab, egal was für ein Gerät der Bildschirm ziert.
Daraus folgt dann auch gleich
Zitat
Das Projekt wird ja noch wachsen - ich würde also je Auflösungsbereich (vermutlich: Handy, Tablet und PC) eine css-Datei anlegen, die das Layout entsprechend festlegt. Wäre das der richtige Weg?
dass das der falsche Weg ist. Das CSS wird nicht nach Geräten oder der Fensterbreite unterteilt, sondern nach der Struktur der Webside und wiederkehrenden Darstellungen, folgt also dem Inhalt. Ansonsten landest du ganz schnell in Teufels Küche, nicht als Koch, sondern als Dessert.
Ob das CSS in einer oder mehreren CSS-Dateien liegt ist dabei zweitrangig. Bei der Entwicklung des Layouts ist die Unterteilung auf mehrere CSS-Dateien durchaus sinnvoll, da so verschiedene Lösungen parallel entwickelt und schnell ein- und ausgebunden werden können.
So entstehen auch viele Media Query-Blöcke, die direkt bei den jeweiligen Grundangaben stehen und leicht gepflegt und angepasst werden können. Das ist auch sinnvoll, da der Einsatz der Media Queries vom jeweiligen Inhalt bestimmt wird.
Zitat
ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten
Nein.
Flexbox kann zwar viel, aber nicht alles.
Alle Container, die mittels einer Flex-Anweisung gestaltet werden sollen (Flex-Items), müssen direkt in einem übergeordneten Container (Flex-Container) liegen. Flexbox verteilt dann den Leerraum, so dass die gewünschte Darstellung erzielt wird. Zusätzlich kann die Reihenfolge der Flex-Items unabhängig vom Quelltext bestimmt werden.
Zitat
Wie erreiche ich dabei am besten, dass bei einer mittleren Auflösung statt 3 Bilder + Text (also 4 Spalten) nur 2 Bilder + Text (also 3 Spalten) angezeigt werden.
Es werden keine Spalten erstellt. Dadurch, dass alle übereinander stehenden Container jeder Zeile gleich breit sind erscheint nur die Illusion von Spalten, also eine Spaltenansicht. Denn
Zitat
ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten
durch konkrete Spalten könnte deren Inhalt nicht mehr frei angeordnet werden, so wie es dir vorschwebt.
Die Spaltenansicht wird durch die Breite der Flex-Items erzeugt. Bei 25% passen vier Container nebeneinander, bei 33,33% drei. Wobei je nach Boxmodell noch padding, border und margin berücksichtigt werden müssen. Bei 25% Breite und einem Rahmen von 1px passen nur drei Container nebeneinander.
Bei Flexbox empfiehlt sich aktuell das Content-Box-Modell, da einige noch relevante Browser dies bei Flexbox stur anwenden. Ansonsten müsste für diese Browser immer ein Fallback eingebaut werden.
Am sinnvollsten und bewährtermaßen erstellst du zunächst das Layout für schmale Fenster ohne Flexbox. Wer immer noch die inzwischen unbegründete Sorge trägt, das Flexbox von den Browsern einigen / vielen seiner Besucher nicht unterstützt wird, hat damit gleich ein Fallback.
Dann werden mit zunehmender Fensterbreite die Media Queries und Flexbox eingefügt und damit aktiviert. Diese Vorgehen wird mit dem Schlagwort Mobile First umschrieben.
Gruss
MrMurphy
