Gestaltung eines Produktseitenlayouts mit Flexbox

Jeden Tag spreche ich bei Shopify mit Partnern, die ständig die Grenzen des Möglichen im E-Commerce-Design erweitern. In letzter Zeit habe ich eine Reihe von Designern beobachtet, die mit Flexbox in ihren Shops experimentieren. Als Webdesigner und Entwickler ist eines unserer Hauptziele, den Fokus auf den Inhalt zu lenken und es unseren Besuchern zu erleichtern, diesen Inhalt zu navigieren. Um dieses Ziel zu erreichen, benötigen wir ein funktionierendes Layout, bei dem die Technologie in den Hintergrund tritt und der Inhalt zum Helden wird.

Flexbox kann uns helfen, flexible Layouts zu erstellen, die für das Web und mobile Geräte optimiert sind. Aber nutzen wir es? Viele von uns verwenden immer noch Floats und inline-block für das Layout. Natürlich kennen Sie Ihr Publikum am besten. Wenn Sie beispielsweise viele Benutzer unter IE 9 und darunter haben und nicht bereit sind, eine akzeptable Fallback-Erfahrung zu schaffen, sind Sie vielleicht im Float-Land gefangen. Aber es gibt heutzutage eine Menge Grün (Unterstützung) im Flexbox-Land.

Ich glaube an die Kraft des Lernens durch Tun. Dieser Artikel führt Sie durch die kürzliche Veröffentlichung eines kostenlosen Shopify-Themes namens Venture und die Schritte zur Nachbildung des folgenden Produktlayouts mit Flexbox.

Wenn Sie dem Beispiel in diesem Beitrag folgen möchten, schauen Sie sich den vollständigen Pen an.

In diesem Tutorial-Artikel zeige ich Ihnen, wie Sie ein flexibles und responsives Produktlayout mit Flexbox erstellen, das je nach Viewport-Breite auf einzigartige Weise den Fokus auf Produkte legt. Außerdem machen wir das alles in weniger als 100 Zeilen CSS.

Dies basiert auf dem "Venture"-Theme

Das Theme-Design-Team von Shopify hat kürzlich eine ziemlich coole Vorlage für Shopify-Händler namens Venture veröffentlicht. Das Layout ist für das beste Einkaufserlebnis optimiert und legt klaren Fokus auf die Produkte. Während das Layout entwickelt wurde, um verschiedene Geschäftsanforderungen zu erfüllen, konzentrieren wir uns für dieses Tutorial-Beispiel auf den Kern des Layouts und erstellen es mit Flexbox nach. In den folgenden Schritten lernen wir, wie man Elemente horizontal ausrichtet, perfekte Sticky-Footer erstellt, bestimmten Produkten Priorität je nach Viewport und Gerät einräumt, Flexbox-Elemente mit Media Queries anspricht und die Grundlagen von Flexbox lernt, damit Sie mit der Implementierung von Flexbox-Layouts in Ihrem nächsten Webprojekt beginnen können.

Wenn Sie den Codeausschnitt aus diesem Beitrag in einem Shopify-Store mit echten Produkten verwenden möchten, melden Sie sich als Shopify-Partner an und richten Sie einen kostenlosen Entwicklungsspeicher ein. Ein Entwicklungsspeicher bietet Ihnen Zugriff auf alle kostenpflichtigen Funktionen eines Shopify-Stores, sodass Sie ihn als Sandbox-Umgebung zum Experimentieren oder zur Arbeit an einem Theme für einen Kunden nutzen können.

Das Header-Layout

Zuerst richten wir unsere Filter-Navigation ein, die unsere Überschrift und zwei Filterelemente (Dropdowns) mit Labels enthält.

Beginnen wir mit der Einrichtung eines Flexbox-Containers mit seinem Inhalt

<nav class="product-filter">

  <h1>Jackets</h1>

  <div class="sort">

    <div class="collection-sort">
      <label>Filter by:</label>
      <select>
        <option value="/">All Jackets</option>
      </select>
    </div>

    <div class="collection-sort">
      <label>Sort by:</label>
      <select>
        <option value="/">Featured</option>
      </select>
    </div>

  </div>

</nav>

Unsere .product-filter wird unser Flex-Container sein, damit wir die untergeordneten Flex-Elemente entsprechend ausrichten können. Wir deklarieren den Flex-Container wie folgt:

.product-filter {
  display: flex;
}

Unser <h1>-Element erhält den Wert flex-grow: 1, sodass es den Flex-Container auf volle Breite erweitert und sich selbst auf die verbleibende Fläche ausdehnt (was die Sortier-Dropdowns rechtsbündig ausrichtet).

.product-filter h1 {
  flex-grow: 1;
}

Um die Kindelemente unseres .sort-container horizontal auszurichten, machen wir ihn ebenfalls zu einem Flex-Container. Sie können Flex-Container verschachteln!

.sort {
  display: flex;
}

Die Sortiercontainer, die <div>s sind, werden standardmäßig übereinander gestapelt.

Standardmäßig richtet display: flex; Kindelemente horizontal aus. Wir verwenden dies im Sortiercontainer, um sie nebeneinander auszurichten. Wir machen jeden einzelnen Sortiercontainer ebenfalls zu einem Flex-Container (ein dritter verschachtelter Flex-Container!) und verwenden *auch* flex-direction: column; für die Filter, damit sie vertikal ausgerichtet werden.

.collection-sort {
  display: flex;
  flex-direction: column;
}

Mit wenigen CSS-Zeilen sind unsere Überschrift und die Filter so gestaltet, wie wir es wollen. Nun werden wir mit unserem aktuellen Wissen über Flexbox an unserem Gitterlayout für unsere Produkte arbeiten.

Das Produktlayout

Wir verwenden den folgenden HTML-Code für unser Flexbox-Layout.

<section class="products">

  <!-- It's likely you'll need to link the card somewhere. You could add a button in the info, link the titles, or even wrap the entire card in an <a href="..."> -->

  <div class="product-card">
    <div class="product-image">
      <img src="assets/img/coat-01.jpeg">
    </div>
    <div class="product-info">
      <h5>Winter Jacket</h5>
      <h6>$99.99</h6>
    </div>
  </div>

  <!-- more products -->

</section>

Wie zuvor benötigen wir einen Flex-Container. In diesem Szenario verwenden wir .products als unseren Flex-Container. Wir fügen zwei neue Eigenschaften hinzu, die es den Flex-Kindern ermöglichen, sich horizontal auszurichten *und* in neue Zeilen umzubrechen, wenn sich die Viewport-Breite erweitert und verkleinert.

.products {
  display: flex;
  flex-wrap: wrap;
}

Standardmäßig ordnet display: flex; die Kindelemente horizontal von links an, aber wir haben flex-wrap: wrap; hinzugefügt, um die Kindelemente in eine neue Zeile umzubrechen, sobald nicht genügend Platz vorhanden ist, um die Elemente in derselben Zeile unterzubringen, abhängig von der Viewport-Breite.

Um die Breite unserer Flex-Elemente zu steuern, fügen wir flex: 1; hinzu, damit alle unsere Flex-Elemente gleichen Platz in der Zeile einnehmen. In unserem Beispiel haben wir 10 Jackenprodukte, und mit flex: 1; werden alle Produkte in einer Zeile platziert.

Für unser Design möchten wir 5 Artikel pro Zeile haben und den Rest bei Bedarf in neue Zeilen umbrechen. Um fünf pro Zeile zu erhalten, müssen sie eine Breite von 20% haben (5 * 20 = 100). Die Einstellung von flex-basis: 20% würde funktionieren, aber wenn wir die Polsterung berücksichtigen, überschreitet sie 100% und wir erhalten nur 4 pro Zeile. Mit 2% Polsterung auf beiden Seiten und 16% flex-basis passt es genau.

.products {
  display: flex;
  flex-wrap: wrap;
}

.product-card {
  padding: 2%;
  flex-grow: 1;
  flex-basis: 16%;

  display: flex; /* so child elements can use flexbox stuff too! */
}

Wir können dies auch in Kurzschreibweise wie folgt tun:

.product-card {
  flex: 1 16%;
}

Wenn flex-grow für die Produkte auf 1 gesetzt ist, wird sichergestellt, dass die Produktzeile immer den gesamten Platz ausfüllt.

Damit die Bilder darin gut passen:

.product-image img {
  max-width: 100%;
}

Produktdaten unten ausrichten

Es kann manchmal schwierig sein, einen festen Footer einzustellen oder Inhalte am unteren Rand eines Containers zu platzieren. Flexbox kann uns auch dabei helfen. Wenn Sie dem Code Schritt für Schritt gefolgt sind, werden Sie sehen, dass das Label für unsere Jacken nicht perfekt unter den Jackenbildern ausgerichtet ist.

Dieses Szenario ist üblich: Wir können die Höhe oder Länge des Inhalts nicht steuern, möchten aber ein anderes Element perfekt am unteren Rand des Containers ausrichten. Flexbox hilft uns bereits dabei, die Container selbst mit gleicher Höhe pro Zeile zu halten, aber die Bilder sind immer noch von variabler Höhe.

Beliebte Methoden zur Ausrichtung der Unterseiten erfordern möglicherweise die Verwendung von absoluter Positionierung oder sogar JavaScript. Glücklicherweise kann mit Flexbox diese komplexe Aufgabe durch einfaches Hinzufügen des folgenden CSS zu unserem .product-info-Container gelöst werden:

.product-info {
  margin-top: auto;
}

Das ist alles! Flexbox ist intelligent genug, um das Element dann am unteren Rand des Flex-Containers zu platzieren. Mit ein paar Zeilen Stil erhalten wir das folgende Ergebnis:

Responsives Flexboxing

Da wir weniger horizontalen Platz zur Verfügung haben, möchten wir die Anzahl der Produkte pro Zeile reduzieren. Wenn beispielsweise der maximale Viewport 920px beträgt, möchten wir, dass die Anzahl der Artikel pro Zeile auf vier begrenzt ist, was wir mit Folgendem erreichen können:

@media (max-width: 920px) {
  .product-card {
    flex: 1 21%;
  }
}

(Denken Sie daran, dass es nicht 25% (100% / 4) sind, weil wir die Polsterung, die ich zuvor hinzugefügt habe, kompensieren müssen. Das könnten wir mit box-sizing: border-box vermeiden, aber das ist Ihre Entscheidung.)

Die vorherigen CSS-Zeilen ergeben fast das gewünschte Ergebnis, da wir vier Artikel pro Zeile erhalten. Aber die *letzte* Zeile hat zwei große Artikel.

Flexbox ist intelligent genug, um jeden verfügbaren Platz auszufüllen, worüber wir uns bei anderen Layout-Methoden keine Gedanken machen müssen. Um das Layout für diesen Viewport zu verbessern, würden wir es vorziehen, größere Bilder der Jacken oben anstatt unten zu haben, um die Produkte besser hervorzuheben.

Eine Möglichkeit, die ersten zu vergrößern und nicht die letzten beiden, besteht darin, sie auszuwählen und ihre Größe direkt zu ändern:

/* Select the first two */
.products .product-card:first-child, 
.products .product-card:nth-child(2) {
  flex: 2 46%;
}

Jetzt, mit unserem angewendeten CSS, erhalten wir ein wirklich großartiges Layout, das für kleinere Viewports wie iPads im Hochformat optimiert ist.

Für noch kleinere Viewports bevorzugen wir ein zweispaltiges Layout für die Jacken. Wir können dieses Layout mit der folgenden Media Query erreichen:

@media (max-width: 600px) {
  .product-card {
    flex: 1 46%;
  }
}

Wenn wir unsere Seite nun auf einem kleineren Viewport wie einem iPad im Hochformat betrachten, stellen wir fest, dass unsere Filter-Navigationsleiste unsere Überschrift überlappt.

Das passiert, weil unser .product-filter so eingestellt ist, dass alle unsere Flex-Elemente in einer horizontalen Linie enthalten sind, unabhängig davon, wie viele Elemente er enthält (kein Umbruch). Mit dem folgenden Code können wir dies mit einer Media Query leicht ändern, sodass unser Inhalt vertikal ausgerichtet wird:

@media (max-width: 480px) {
  .product-filter {
    flex-direction: column;
  }
}

Unsere Kopfzeile und Filter überlappen sich nicht mehr, aber wir können das Layout immer noch verbessern, indem wir die Filter nach links verschieben. Zuvor haben wir die Elemente mit der Eigenschaft align-self: flex-end; nach rechts verschoben. Nun wollen wir align-self: flex-start; hinzufügen:

@media (max-width: 480px) {
  .product-filter {
    flex-direction: column;
  }
  .sort {
    align-self: flex-start;
  }
}

Und schon haben wir ein flexibles und responsives Layout für unsere Produkte.

Kompatibilität

Der größte Einwand gegen Flexbox ist immer die Browserunterstützung. Aber wie wir bereits in diesem Artikel erwähnt haben, ist die Unterstützung heutzutage ziemlich gut. Ältere IE-Versionen, die Flexbox nicht unterstützen, werden nicht einmal mehr von Microsoft unterstützt.

Wie bei jedem Webprojekt, an dem Sie arbeiten, sollten Sie immer gründliche Tests durchführen, um sicherzustellen, dass das Erlebnis Ihrer Besucher optimiert ist und Ihr Layout den Anforderungen Ihres Projekts entspricht.

Fazit

Im obigen Tutorial haben wir ein leistungsstarkes responsives Layout zur Anzeige einer Produktmenge mit Flexbox erstellt. Im Gegensatz zu anderen CSS-Methoden, die nicht für die Erstellung von Layouts gedacht sind, ist Flexbox ein leistungsstarkes Werkzeug, das auf dieses Ziel ausgerichtet ist, und Sie sollten es nutzen. Flexbox-Layouts können unsere Websites und Apps flexibler und widerstandsfähiger machen.

Es gibt viel über Flexbox zu wissen, also stellen Sie sicher, dass Sie The Complete Guide to Flexbox als Referenz verwenden.