Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 11.04.2019, 11:28
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
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