zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox: bester workaround für "column-gap"?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.04.2019, 22:06
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard Flexbox: bester workaround für "column-gap"?

Moin.


Minimales Testcase sei:


HTML

HTML-Code:
<main><div>Eins</div><div>Zwei</div><div>Drei</div><div>Vier</div><div>Fünf</div><div>Sechs</div></main>

CSS
Code:
main { display: flex; flex-wrap: wrap; justify-content: space-between; } 

div { flex: 1; }

Ziel: Minimalen horizontalen Abstand zwischen den Flex-Items festlegen.


Der Abstand des ersten Flex-Items nach links soll ebenso Null sein, wie der rechte Abstand des letzten Flex-Items (in einer Zeile) nach rechts.



Leider wird die Eigenschaft "column-gap" noch nicht breit unterstützt. Sie würde die Aufgabe perfekt lösen.


Was findet ihr besonders elegant/minimalistisch?



Kombination aus margin, padding, negativen Werten?


Mit first-child/last-child?



Oder verwendet man bei allen Layouts mit potentiell mehr als einer Zeile besser grid?





Danke.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.04.2019, 22:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
Leider wird die Eigenschaft "column-gap" noch nicht breit unterstützt. Sie würde die Aufgabe perfekt lösen.
Das sehe ich auch so.

Zitat:
Kombination aus margin, padding, negativen Werten?
Negative Werte auf keinen Fall. Die sind vollkommen unnötig. Margin und padding halt je nach Bedarf.

Zitat:
Mit first-child/last-child?
Das funktioniert mit responsiven Flexbox-Layouts nicht. :nth-child() ist sinnvoller.

Alles zusammen angerichtet mit MediaQueries.

Zitat:
Oder verwendet man bei allen Layouts mit potentiell mehr als einer Zeile besser grid?
Über Grid wird leider viel Unsachliches geschrieben. Meist entweder übertrieben in den Himmel gelobt oder in die tiefste Hölle verdammt. Beides ist falsch.

Mir wird Grid schlicht noch zu wenig unterstützt. Bislang konnte ich alle Wünsche mit Flexbox erfüllen. Deshalb teste ich zwar mit Grid, verwende in der Praxis aber Flexbox.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.04.2019, 22:58
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Negative Werte auf keinen Fall. Die sind vollkommen unnötig. Margin und padding halt je nach Bedarf.
Hättest Du da ein Beispiel, bitte?



Zitat:
Zitat von MrMurphy Beitrag anzeigen
Das funktioniert mit responsiven Flexbox-Layouts nicht. :nth-child() ist sinnvoller.
Ich verstehe noch nicht, was Du meinst.


Kann man per CSS irgenwie das letzte Element einer Flexboxzeile ansprechen? Natürlich ohne zu wissen, welches es sein wird (Responsiveness!).




Wichtig ist mir:


Sobald der Bildschirm so schmal ist, dass nur noch ein Objekt pro Zeile hineinpasst, sollen so wenig Stilregeln in das Media-Querie geschrieben werden müssen, wie möglich.

Denn vermutlich müssen ja die "Hacks" zu margin/padding/last-child für eine einspaltige Darstellung wieder aufgehoben werden.
__________________


Geändert von AndreasB (10.04.2019 um 08:24 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.04.2019, 08:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.999
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Was ich denke, dass er mit nth-child meint: Du kannst mit nth-child ein spezielles flexbox-Kindelement ansprechen, allerdings geht das nicht so, wie du es gerne hättest. Du kannst nicht wissen, welches Element das letzte in einer Reihe ist. Du kannst aber die Breiten so einstellen, dass du es weißt. Gibst du zB. den Elementen bei mediaquery X eine Breite von 33%, dann ist immer dein drittes Kindelement das letzte.

Bezüglich flexbox und grid: Beide behandeln unterschiedliche Szenariern, geht es darum, Elemente nur in eine Richtung (horizontal oder vertikal) auszurichten, dann ist flexbox das Werkzeug deiner Wahl. Möchtest du sowohl horizontal als auch vertikal deine Elemente anordnen, dann verwende grid. Du kannst mit flexbox auch mehrzeilig werden (mit flex-wrap: wrap), aber dann kannst du trotzdem nicht gezielt das erste Element einer Reihe etc. ansprechen.
Auch ist die Unterstützung für grid mittlerweile geeignet für den normalen Einsatz: Es wird sogar in IE11 unterstütz (nicht vollständig, aber hier sollte die Darstellung trotzdem genügen)
Falls man genug Energie und Zeit investieren möchte kann man mit @supports mediaqueries ein Layout für browser erstellen, die grid unterstützen und ein fallback-Layout mit flexbox erstellen.
Hier ein guter Artikel dazu: https://www.smashingmagazine.com/201...-flexbox-grid/

Und vor allem die dazugehörige demo: https://s.codepen.io/matuzo/debug/Emddvx
Mit dem slider links oben kann man das CSS für nichts/float/flexbox/grid aktivieren
Mit Zitat antworten
  #5 (permalink)  
Alt 10.04.2019, 09:08
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@cloned


Danke für Deine Empfehlung bei einer Anordnung in zwei Richtungen Grid den Vorzug vor Flexbox zu geben.


Ich hatte das so auch schon an anderer Stelle gelesen und es leuchtet mir auch ein.

Es ist etwas schade, dass allein die fehlende Unterstützung der Eigenschaft "column-gap" für Flexbox dazu führt, dass man bei einer einfachen Aufgabe wie einer Fotogalerie mit stets gleichgroßen Rechtecken mit Vorschaubildern und Bildunterschrift zu Grid wechseln muss.


Ich muss zur Unterstützung von Grid noch recherchieren, welche Browser auf welchen Plattformen es nicht unterstützen. So richtig traue ich mich da nicht ran.
Ein Fallback mit Flexbox einzurichten ist mir zu aufwändig.


Ich werde nochmal mit margin und padding experimentieren, ob sich die Aufgabe nicht doch gut mit Flexbox lösen lässt.
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 11.04.2019, 11:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
Kann man per CSS irgenwie das letzte Element einer Flexboxzeile ansprechen? Natürlich ohne zu wissen, welches es sein wird (Responsiveness!).
Welches es ist kann mit MediaQueries festgelegt werden. Dann kann das letzte mit nth-child() gestaltet werden.

Zitat:
Sobald der Bildschirm so schmal ist, dass nur noch ein Objekt pro Zeile hineinpasst, sollen so wenig Stilregeln in das Media-Querie geschrieben werden müssen, wie möglich.
Das ist der Normalfall wenn die Vorgehensweise Mobile-First berücksichtigt wird. Wobei die Bezeichnung Mobile leider in die Irre führt. Small-First wäre eindeutiger, da die Vorgehensweise nichts mit Mobilen Geräten zu tun hat. Zudem entsteht so gleich ein Fallback für die wenigen Browser, die Flexbox (oder CSS-Grid) nicht können.

Zitat:
Es ist etwas schade, dass allein die fehlende Unterstützung der Eigenschaft "column-gap" für Flexbox dazu führt, dass man bei einer einfachen Aufgabe wie einer Fotogalerie mit stets gleichgroßen Rechtecken mit Vorschaubildern und Bildunterschrift zu Grid wechseln muss.
Es geht auch ohne column-gap.

Zitat:
Ich muss zur Unterstützung von Grid noch recherchieren, welche Browser auf welchen Plattformen es nicht unterstützen.
IE 11 und auch neuere jedenfalls nicht. Die haben damals ihr eigenes CSS-Grid entwickelt, welches ganz anders funktioniert. Für die muss also ein vollkommen eigenes CSS-Grid erstellt werden. Entsprechend ist es auch bei Can-I-Use gekennzeichnet.

Wobei die Verbreitung der betroffenen IE-Versionen stark abnimmt.

Ich habe mal drei Lösungen, eine mit Flexbox, zwei mit CSS-Grid. Für die maximale Anzahl der Bilder pro Zeile muss das CSS gegebenenfalls noch angepasst werden. Das ist aber kein Problem.

Zunächst der HTML-Quelltext für alle 3 Beispiele:

Code:
      <article class="cardlayout">
         <section>
            <img src="http://lorempixel.com/600/300/transport/2">
            <h3>Ein Flugzeug</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/transport/5">
            <h3>Der Porsche</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/transport/8">
            <h3>Das Mini</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/nature/2">
            <h3>Eine Insel mit zwei Bergen</h3>
            <p>EP ⋅ 859712829536</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/nature/10">
            <h3>Der Wasserhahn tropft</h3>
            <p>EP ⋅ 859712829537</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/abstract/1">
            <h3>Nach der Feier</h3>
            <p>EP ⋅ 859712829538</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/animals/8">
            <h3>Ein Hund bellt - oder auch nicht</h3>
            <p>EP ⋅ 859712829539</p>
         </section>
      </article>
CSS mit Flexbox:

Code:
   /*.cardlayout*/
   @media all {
      .cardlayout {
         border: 2px solid grey;
         display: flex;
         flex-wrap: wrap;
      }
      .cardlayout img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      .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;
      }
   }
   @media only screen and (min-width: 600px) {
      .cardlayout>* {
         width: calc(50% - 0.25rem);
      }
      .cardlayout>*:not(:nth-child(2n+2)) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 900px) {
      .cardlayout>* {
         width: calc(33.3333% - 0.3333rem);
      }
      .cardlayout>*:not(:nth-child(2n+2)) {
         margin-right: 0rem;
      }
      .cardlayout>*:not(:nth-child(3n+3)) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 1100px) {
      .cardlayout>* {
         width: calc(25% - 0.375rem);
      }
      .cardlayout>*:not(:nth-child(3n+3)) {
         margin-right: 0rem;
      }
      .cardlayout>*:not(:nth-child(4n+4)) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 1300px) {
      .cardlayout>* {
         width: calc(20% - 0.401rem);
      }
      .cardlayout>*:not(:nth-child(4n+4)) {
         margin-right: 0rem;
      }
      .cardlayout>*:not(:nth-child(5n+5)) {
         margin-right: 0.5rem;
      }
   }
CSS mit CSS-Grid und MediaQueries:

Code:
   /*.cardlayoutgrid*/
   @media all {
      .cardlayout {
         border: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr;
         grid-gap: 0.5rem;
      }
      .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;
      }
   }
   @media only screen and (min-width: 500px) {
      .cardlayout {
         grid-template-columns: repeat(2, 1fr);
      }
   }
   @media only screen and (min-width: 800px) {
      .cardlayout {
         grid-template-columns: repeat(3, 1fr);
      }
   }
   @media only screen and (min-width: 1100px) {
      .cardlayout {
         grid-template-columns: repeat(4, 1fr);
      }
   }
   @media only screen and (min-width: 1300px) {
      .cardlayout {
         grid-template-columns: repeat(5, 1fr);
      }
   }
CSS mit CSS-Grid ohne MediaQueries (für die Anordnung nur 3 Zeilen CSS):

Code:
   /*.cardlayoutgrid*/
      .cardlayout {
         border: 2px solid grey;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         grid-gap: 0.5rem;
      }
      .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;
      }

Geändert von MrMurphy (11.04.2019 um 11:31 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.04.2019, 13:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.999
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
IE 11 und auch neuere jedenfalls nicht. Die haben damals ihr eigenes CSS-Grid entwickelt, welches ganz anders funktioniert. Für die muss also ein vollkommen eigenes CSS-Grid erstellt werden
Hier muss ich dich korrigieren, das stimmt so nicht. Erstens gibt es keinen neueren IE als IE11, danach gibt es nur noch Edge. Edge kann aber mittlerweile grids und wenn er im laufe des Jahres mit webkit als rendering-Engine veröffentlicht wird, sowieso.

IE11 hat kein "ganz anderes" grid, es verwendet lediglich ältere Syntax. IE11 unterstützt nicht alle funktionen von grid, das stimmt schon. IE11 unterstützt zB nicht die neuanordnung von Elementen, außer man gibt jedem Element ein order-attribut. (In allen anderen Browsern reicht es zB einem Element eine order von 4 zu geben, um es an Stelle 4 anzuzeigen)

Verwendet man grid also ohne spezifische order, dann kann es sehr wohl auch im IE eingesetzt werden (oder man macht sich die Mühe und spezifiert die order für jedes Element extra)

Man muss das CSS-Grid für IE11 also auch nicht eigens erstellen, mittels post-css kann das CSS für ie-grids automatisch erstellt werden (für grunt zb hier: https://github.com/nDmitry/grunt-postcss )

Ein guter Artikel dazu auch hier:
https://css-tricks.com/css-grid-in-i...isconceptions/

Zusammengefasst kann man sagen: Unterstützung von grids in IE ist nicht perfekt aber auch nicht so schlecht wie man meint, man kann damit arbeiten. Es müssen eventuell kleine abstriche bei der Darstellung gemacht werden, aber wenn das nicht schlimm für das Projekt ist soll es kein Hinderungsgrund sein.
Oder anders ausgedrückt: Wenn man bei der Entwicklung schon mit IE testet hat man nachher keinen Ärger damit
Mit Zitat antworten
  #8 (permalink)  
Alt 12.04.2019, 21:02
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Herzlichen Dank McMurphy für Deine Beispiele. Und Dir, cloned, für die hilfreichen Hinweise zum Einsatz von Grids und IE.

Da ich es bevorzuge Breakpoints nur dann zu setzen, wenn sich etwas Grundlegendes im Layout ändert (Horizontales Menü zum Burger) und ansonsten anzustreben, dass das Layout selbst reponsiv bleibt, habe ich versucht eine Flexboxlösung mit negativem Rand zu bauen.


Aber das flutscht noch nicht:
https://borumat.de/-/html-test/galerie/



Ein Test in FF zeigt, dass die negativen Rändern des Flex-Containers sich nicht mit den positiven Rändern der Flex-Items neutralisieren.


Bei dem der Vorschau nachfolgenden P-Element gibt es den unerwünschten Effekt durch die kollabierenden Margins.




Zu Grids:
Aus Neugier schaue ich mir das natürlich an, aber ich möchte es zur Zeit noch nicht einsetzen, weil ich damit zu unerfahren bin. Zudem denke ich, dass bei gleichgroßen Rechtecken als Flexitems (im Test Case sind es Figure-Elemente) kein Grid nötig ist.

Falls jemand was zu dem Effekt mit den Margins in dem Flex-Container sagen möchte: gerne.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 13.04.2019, 18:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Es ist schwierig dir zu helfen.

Ich habe dir drei funktionierende Beispiele erstellt und gezeigt. Ich habe dir geschrieben, wovon du die Finger lassen sollst.

Jetzt kommst du mit einem Beispiel, das nicht funktioniert, mit problemerzeugenden negativen Werten und willst das für deine Bedürfnisse (resposive Design) angepasst haben. Das funktioniert nicht.

Zitat:
Falls jemand was zu dem Effekt mit den Margins in dem Flex-Container sagen möchte: gerne.
Die Möglichkeit der negativen Werte stammt noch aus der Zeit der Röhrenbildschirme, die hauptsächlich in zwei Größen (15 Zoll und 17 Zoll) verkauft wurden. Seiten wurden noch vollkommen benutzerunfreundlich für bestimmte Breiten und sogar bestimme Browser "optimiert". Übersetzt: Die Webseitenersteller wollten sich auf Kosten ihrer Besucher Arbeit und Lernzeit sparen, also blenden.

Um ihre Seiten "künstlerisch" wertvoll zu gestalten haben Webseitenersteller eine Zeitlang mit position-Angaben und negativen Werten Elemente auf ihren Seiten verschoben. Problem: Die Besucher mochten das nicht, die Seiten wurden unübersichtlicher und bei fast jeder Erweiterung des Inhalts war das Layout erst mal zerstört. Solche Webseiten sind dann auch schnell wieder in der Versenkung verschwunden.

Mit dem Aufkommen von Smartphones und Tablets mussten selbst ewiggestrige Webseitenersteller erkennen, dass die Möglichkeit von negativen Werten in der Praxis nix taugt. Mit dem Aufkommen und den Möglichkeiten von HTML5 und CSS3 sind negative Werte vollkommen unsinnig geworden.

Deshalb meine wiederholte Empfehlung: Lass das Grab "Negative Werte" geschlossen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.04.2019, 23:57
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@McMurphy
Dein Ansatz mit den vielen Breakpoints und der vorgegebenen Anzahl von Bildern pro Zeile entspricht, wie erwähnt, gar nicht meinem.

Es lag nicht in meiner Absicht, Dich zu verärgern.


Mittlerweile habe ich die Lösung gefunden. Ich war mit den negativen Rändern genau auf dem richtigen Dampfer.

Nur hatte ich mich in meinem Testcase selber ausgetrickst, weil ich dem Flex-Container eine Hintergrundfarbe und einen Rahmen zugewiesen hatte.

Genau das beißt sich mit negativen Rändern.
Wenn man die Hintergrundfarbe und den Rahmen einem umhüllenden Container gibt, flutscht es.

Das CSS ist extrem minimalistisch und dadurch exzellent wartbar:

Code:
.vorschau { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 -2em -2em; }

.vorschau figure { margin: 0 0 2em 2em; }

.vorschau img { width: 13em;  }
https://borumat.de/-/html-test/galerie/solution

Und hier nochmal das alte Testcase mit der Rahmenlinie und der weißen Hintergrundfarbe aber plus umhüllenden Container:
https://borumat.de/-/html-test/galer...onal-container

Falls Du nochmal darüber Auskunft geben möchtest, warum Du negative Margins als "böse" ansiehst: Ich freue mich über konkrete Beispiele.

Der obige Code erscheint mir jedenfalls Deine Sicht zu widerlegen.
__________________


Geändert von AndreasB (14.04.2019 um 09:01 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 22:41 Uhr.