XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Flexbox: bester workaround für "column-gap"? (http://xhtmlforum.de/showthread.php?t=73786)

MrMurphy 14.04.2019 12:11

Nein, du verärgerst mich überhaupt nicht. Mir ging es um (und deshalb habe ich es auch extra an den Anfang geschrieben):

Zitat:

Es ist schwierig dir zu helfen.
Du willst eine moderne responsive Webseite und elegantem Quellcode mit dafür vollkommen untauglichen Mitteln erstellen. Daran sind bereits vor dir tausende Webseitenersteller gescheitert, ihre Webseiten nach kurzer Zeit wieder verschwunden. In vielen Fällen wohl weil ihnen das Layout ihrer Seiten bei Änderungen immer wieder um die Ohren flog, sowas frustet ungemein.

Ich erstelle bereits seit über 20 Jahren hobbymäßig Webseiten, habe also bereits vor CSS angefangen und die Entwicklung aufmerksam verfolgt. Neue Möglichkeiten habe ich intensiv gelernt.

An meinen Lösungen, die immer den aktuellen HTML- und CSS-Regeln entsprechen und langfristig funktionieren ist das auch nachvollziehbar. Ich nutze auch keine Ausreden um aktuelle Techniken madig zu machen.

Aus der Erfahrung heraus kann ich dir deshalb halt nur mitteilen, dass dein Lösungsansatz immer nur für bestimmte Inhalte und nur für bestimmte Bildschirm- / Fenstergrößen passen wird. Das sollte einfach unmißverständlich rüber kommen.

Ich helfe gerne, aber nicht mit unsachlichen tendenziösen Angaben wie "Ich habe zwar von CSS-Grid keine Ahnung, weiß aber trotzdem dass es Mist ist und überhaupt zu wenig unterstützt wird." Ich präsentiere lieber Lösungen, die jeder selbst ausprobieren kann und danach für sich entscheiden kann, ob er sie verwenden will oder halt nicht.

Zu anderen Lösungen kann ich dann nur noch schreiben ob ich die aus meiner Erfahrung heraus für sinnvoll halte oder nicht. Mit Sicherheit lehne ich keine Lösung ab, nur weil sie nicht von mir kommt, sondern prüfe sie sachlich. Wenn ich eine zusätzliche Lösung lerne, die dann auch mir weiterhilft, freue ich mich und merke sie mir.

AndreasB 14.04.2019 12:31

Ich teile grundsätzlich Dein Ziele, dass eine Lösung für möglichst viele Situationen passen und gut wartbar sein soll.


Daher verstehe ich in diesem Fall Deine Kritik an meinem Code nicht.


Er passt sich ohne einen einzigen Breakpoint an. Bei einer Fotogalerie ist es üblich, dass die Größe der Vorschaubilder gleich bleibt.


Ich stelle mich gerne einer sachlichen Kritik. Nur sehe ich in diesem Fall bisher keine konkreten Argumente von Dir.


Du schreibst "dein Lösungsansatz immer nur für bestimmte Inhalte und nur für bestimmte Bildschirm- / Fenstergrößen passen wird".


Das empfinde ich als ungerechtfertigt. Das trifft, sorry, vielmehr auf Dein Codebeispiel mit Flexbox zu.


Zu Deiner Aussage "Grid ist Mist": das habe ich nirgendwo geschrieben. So etwas liegt mir fern.

Ich freue mich sogar schon auf die Beschäftigung mit Grid Layouts, möchte jedoch zunächst einmal firm mit Flexbox werden.

MrMurphy 14.04.2019 15:04

Zitat:

Zu Deiner Aussage "Grid ist Mist": das habe ich nirgendwo geschrieben. So etwas liegt mir fern.
Damit habe ich nicht dich gemeint, sondern diejenigen, die helfen wollen, sich aber selbst nicht mit der Materie auskennen. Das hast du also vollkommen falsch verstanden. Wenn die bestimmte Lösungen nicht verwenden wollen, sollen die das gerne schreiben. Aber nicht schreiben, dass die Lösung grundsätzlich nichts taugt.

Zitat:

Bei einer Fotogalerie ist es üblich, dass die Größe der Vorschaubilder gleich bleibt.
Das kann man so machen. Allerdings hat das dann nichts mit flexiblem Layout zu tun. Außerdem finden es viele Leute nicht schön, wenn die Abstände zwischen Bildern elend breit sind. Oder wenn bei zweispaltigem Layout die Bilder links und rechts außen kleben und dazwischen ein riesiger Abstand ist. Oder wenn bei vierspaltigem Layout zwei Bilder in der letzten Zeile links und rechts außen kleben.

Zu deinem nicht funktionierendem Beispiel. Ich habe mal ein Beispiel erstellt. Es funktioniert ohne negative Abstände, es gibt keine Probleme mit nachfolgenden Absätzen. Die Bilder passen wie von dir gewünscht ihre Größe nicht an.

Ohne JavaScript lassen sich meiner Kenntnis nach aber die Abstände nicht ähnlich wie bei column-gap händeln. Wenn jemand eine bessere Lösung hat gerne her damit.

Zu meinem HTML-Quelltext kann dazu das folgende CSS verwendet werden:

Code:

.cardlayout {
  border: 2px solid grey;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cardlayout section {
  max-width: 400px;
}
.cardlayout img {
  min-width: 1px;
  display: block;
  max-width: 100%;
  border: 0;
}
.cardlayout h3 {
  margin: 0.1rem 0.5rem 0rem 0.5rem;
}
.cardlayout p {
  margin: 0.1rem 0.5rem 0rem 0.5rem;
}
.cardlayout p:last-child {
  margin-bottom: 1.0rem;
}

Dazu musste ich aus meinem dritten CSS-Beispiel nur die ersten Zeilen anpassen. Also Aufwand gleich Null.

AndreasB 14.04.2019 18:10

Du schreibst "[Vorschaubilder haben die gleiche Größe] Das kann man so machen. Allerdings hat das dann nichts mit flexiblem Layout zu tun."


Du verkürzt die Sachlage.


Ob Bildgrößen relativ zum Fließtext angegeben werden (wie bei mir) oder realativ zu anderen Größen (wie bei Dir) ist eine Designentscheidung.


Als Hintergrundinfo: die Entscheidung stammt in meinem Fall von einer befreundeten Designerin, die es sich so wünscht.


Nicht jeder mag es, wenn Bilder wachsen oder schrumpfen, wenn man das Fenster schmaler zieht.


Gleichwohl verstehe ich natürlich Deinen gestalterischen Kritikpunkt der breiten Zwischenräume.


Jedoch ist deine Kritik "hat nichts mit reponsive zu tun" nicht richtig. Da klingt zusätzlich durch, als ob ich mir über solche Dinge keinerlei Gedanken machen würde. Es schwingt eine Geringschätzung darin mit. Das muss nicht sein.


Nochmal zu Deiner vehementen Kritik an negativen Rändern:
Ich kann bisher kein Argument finden.


Auch mein Code ist mühelos an wenigen Stellen anpassbar, wenn die Abstände geändert werden sollen bzw. die relative Bildbreite.


Dein und mein Code realisieren einfach verschiedene Arten der Gestaltung.


Mit Deinem Code ist mein Gestaltungsziel nicht umsetzbar.

Und nochmal:
Mein Code benötigt kein JS um column-gap und row-gap zuverlässig zu improvisieren.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:47 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023