Sponsored Links |
|
||||
Zitat:
Zitat:
Zitat:
Alles zusammen angerichtet mit MediaQueries. Zitat:
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. |
Sponsored Links |
|
||||
Zitat:
Zitat:
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 09:24 Uhr) |
|
|||
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 |
|
||||
@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.
__________________
|
|
||||
Zitat:
Zitat:
Zitat:
Zitat:
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> 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; } } 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); } } 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 12:31 Uhr) |
|
|||
Zitat:
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 |
|
||||
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.
__________________
|
|
|||
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:
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. |
Sponsored Links |
|
||||
@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; } 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 10:01 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|