So verwenden Sie Flexbox, um ein modernes CSS-Kartendesign-Layout zu erstellen

Dank Flexbox, einem neuen Layoutmodus in CSS3, können wir alle unsere Karten buchstäblich in einer Reihe platzieren. Kartendesigns sind in den letzten Jahren immer beliebter geworden; Wie Sie wahrscheinlich bemerkt haben, haben Social-Media-Websites Karten wirklich angenommen. Pinterest und Dribbble verwenden Kartenlayouts, um Informationen und Bildmaterial hervorzuheben. Und wenn Sie sich für Material Design interessieren, sind die Karten von Google in ihrer Musterbibliothek gut beschrieben.

Ich persönlich mag Kartenlayouts wegen ihrer Lesbarkeit und ihrer Scrollbarkeit. Sie präsentieren den perfekten „Burst“ von Informationen auf eine Weise, die gleichzeitig einfach zu durchsuchen, zu scrollen und zu scannen ist.

So erstellen Sie ein Kartenlayout

Wenn Sie jemals versucht haben, Zeilen mit Inhalten in gleicher Höhe zu erstellen, wissen Sie, dass es nicht immer einfach war, sie zu erstellen. In der Vergangenheit mussten Sie wahrscheinlich ziemlich viel herumfummeln, um es zum Laufen zu bringen. Dank Flexbox liegen diese Zeiten so gut wie hinter Ihnen. Abhängig von der Ebene der Browserunterstützung, die Sie bereitstellen müssen, müssen Sie möglicherweise einige Fallbacks einbeziehen, aber die Browserunterstützung für diese Funktion ist heutzutage ziemlich zuverlässig. Um sicher zu gehen, schauen Sie sich Flexbox auf der zuverlässigen Kann ich verwenden an. Und denken Sie daran, dass Sie niemals Änderungen an Ihrer Live-Website vornehmen sollten. Versuchen Sie stattdessen, mit Local zu experimentieren, einer kostenlosen lokalen WordPress-Entwicklungs-App.

Die Grundidee von Flexbox besteht darin, dass Sie die Anzeigeeigenschaft eines Containers auf flex setzen können, wodurch die Größe aller darin enthaltenen Container „geflext“ wird. Spalten mit gleicher Höhe und die Skalierungs- und Kontraktionsoptionen vereinfachen die Erstellung erweiterter Layouts. Mit Karten zu beginnen ist wie ein Flexbox-Spickzettel, aber sobald Sie die Grundlagen beherrschen, können Sie komplexere Layouts erstellen.

Flexbox und Vielseitigkeit

Karten sind vielseitig, optisch ansprechend und einfach zu bedienen, sowohl auf großen als auch auf kleinen Geräten, was perfekt für responsives Design ist. Jede Karte fungiert als Inhaltscontainer, der einfach nach oben oder unten skaliert werden kann. Wenn die Bildschirmgröße kleiner wird, nimmt die Anzahl der Karten in der Reihe normalerweise ab und sie beginnen sich vertikal zu stapeln. Es gibt zusätzliche Flexibilität, da sie eine feste oder variable Höhe haben können.

So erstellen Sie das Layout

Wir erstellen ein Flexbox-Kartenlayout mit einer Reihe von vier horizontalen Containern auf größeren Bildschirmen, zwei auf mittleren und einer einzelnen Spalte für kleine Geräte.

Unten ist das Code-Snippet zum Erstellen eines grundlegenden Layouts zum Anzeigen von vier Karten. Ich füge den inneren Karteninhalt nicht hinzu (da dieser in den Codebeispielen zu lang wird), stellen Sie also sicher, dass Sie dort etwas Starterinhalt einfügen (und die Menge des Inhalts zwischen den vier Karten variieren lässt). Außerdem wird hier zunächst eine Reihe mit vier Karten angezeigt, aber es können weitere hinzugefügt werden, wenn Sie das Verhalten mit mehreren Inhaltsreihen sehen möchten. Alle Codes sind auf Codepen zu finden.

Um unser Layout-Design in einem Gittermuster anzuzeigen, müssen wir außen beginnen und uns nach innen vorarbeiten. Es ist wichtig, dass Sie auf den richtigen Container verweisen, sonst wird es ein wenig chaotisch.

Wir werden zuerst auf den Abschnitt mit einer Klasse von .cards abzielen. Die Anzeigeeigenschaft des Containers müssen wir in flex ändern.

Hier ist der HTML-Code, mit dem Sie beginnen möchten:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Hier ist das CSS für den Anfang:

.cards {
   display: flex;
   justify-content: space-between;
}

Flex-Eigenschaft

Bevor Sie zu tief einsteigen, ist es gut, die Grundlagen der Flex-Eigenschaft zu kennen. Die Flex-Eigenschaft gibt die Länge des Elements relativ zu den restlichen flexiblen Elementen im selben Container an. Die Eigenschaft flex ist eine Abkürzung für die Eigenschaften flex-grow , flex-shrink und flex-basis . Der Standardwert ist 0 1 auto; . Meiner Meinung nach ist der beste Weg, Flexbox vollständig zu verstehen, mit den verschiedenen Werten herumzuspielen und zu sehen, was passiert.

Die flex-grow Eigenschaft eines Flex-Elements gibt an, wie viel Platz innerhalb des Flex-Containers das Element einnehmen soll.

Die Eigenschaft flex-shrink gibt an, wie das Element im Verhältnis zu den übrigen flexiblen Elementen im selben Container schrumpft.

Die flex-basis Eigenschaft gibt die anfängliche Hauptgröße eines Flex-Elements an. Diese Eigenschaft bestimmt die Größe der Inhaltsbox, sofern nicht anders mit Box-Sizing angegeben. Auto ist die Standardeinstellung, wenn die Breite durch den Inhalt definiert wird, was ähnlich ist wie width: auto; . Es nimmt Platz ein, der durch seinen eigenen Inhalt definiert wird. Es kann einen bestimmten Wert geben, der wie in der flex-basis: 15em; . Wenn der Wert 0 ist, sind die Dinge ziemlich festgelegt, da das Element nicht erweitert wird, um freien Speicherplatz zu füllen.

Wir begannen mit display: flex; und justify-content: space-between; und an diesem Punkt sind die Dinge ein wenig unvorhersehbar. Flexbox wird verwendet, auch wenn es im Moment nicht besonders offensichtlich ist. Mit dieser Deklaration sind alle Flex-Artikel in einer horizontalen Reihe nebeneinander platziert.

Sehen Sie dies auf Codepen.

Sie fragen sich wahrscheinlich, warum jedes dieser Flex-Elemente eine andere Breite hat. Flexbox versucht herauszufinden, was die kleinste Standardbreite für jedes dieser Elemente ist. Und aufgrund unterschiedlicher Wortlängen und anderer Gestaltungselemente erhalten Sie am Ende diese unterschiedlich großen Kästchen. Um ein konsistentes Aussehen zu erreichen, müssen wir etwas mehr Arbeit leisten. Das Festlegen einer Umhüllung und das Bestimmen der gewünschten Breite helfen dabei, daraus einheitliche Karten zu machen.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Standardmäßig versuchen alle Flex-Elemente, in eine Zeile zu passen. flex-wrap: wrap; bewirkt, dass die Elemente untereinander umbrochen werden, da die Standardeinstellung die volle Breite ist.

Sehen Sie dies auf Codepen.

Die volle Breite eignet sich hervorragend für kleine Geräte, also denken wir daran, wenn wir unseren größeren Bildschirm planen, bevor wir verschiedene Haltepunkte angehen. Wenn wir die Breite ändern, sehen die Karten gleichmäßiger aus.

Wir müssen jetzt die Klasse .card hinzufügen, um unsere individuellen Karten zu stylen. Dies kann direkt unter die .cards Stile gehen.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Denken Sie daran, dass die Flex-Eigenschaft früher eine Kurzschrift ist: flex-grow ist 0, flex-shrink ist 1 und die width ist 24%. Durch Hinzufügen einer bestimmten Breite erhalten wir eine Viererreihe mit etwas Abstand dazwischen.

Sehen Sie dies auf Codepen.

Wir setzen die justify-content Eigenschaft für Abstandszwecke. Das erste Element wird ganz links angezeigt, das zweite und dritte Element werden in der Mitte angezeigt und das vierte Element wird ganz rechts angezeigt. Da die Breite der Karte 24 % beträgt, bleibt noch etwas Platz, da unsere vier Spalten bei 24 % nicht 100 % ergeben. Wir haben noch 4% übrig, um genau zu sein. Diese 4 % werden zu gleichen Teilen auf die einzelnen Elemente verteilt. Wir haben also etwa 1,33 % Platz zwischen den Karten.

Sehen Sie dies auf Codepen.

Wir können auch genauer sein, indem wir calc verwenden. Das Ändern des flex-basis Werts zur Verwendung von calc würde in etwa so aussehen:

.card {
	flex: 0 1 calc(25% - 1em);
}

Das Coole dabei ist, dass der Browser 25 % des Speicherplatzes beansprucht und 1 em davon entfernt, wodurch die Karten etwas kleiner werden.

Es ist eine elegante Möglichkeit, den verfügbaren Platz anzupassen. Das 1em wird gleichmäßig auf die Artikel verteilt und wir haben am Ende das perfekte Layout.

Bis jetzt haben wir wirklich nicht viel über die Höhe gesprochen. Ich habe eine weitere Reihe von Karten hinzugefügt, um zu demonstrieren, wie die Höhe funktioniert. Es kommt darauf an, welche Karte den meisten Inhalt hat – die Höhe der anderen folgt. Daher hat jede Inhaltszeile die gleiche Höhe.

Dies ist eine sehr „herausgezoomte“ Ansicht, aber Sie werden feststellen, dass die erste Reihe ziemlich hoch ist, weil die zweite Karte mehr Text enthält als die anderen in dieser Reihe. Die zweite Zeile hat weniger Text, ist also insgesamt kürzer.

Karten für kleinere Geräte

Derzeit haben wir vier Spalten auf allen Bildschirmen, was nicht wirklich eine bewährte Methode ist. Wenn Sie Ihr Browserfenster verkleinern, werden Sie feststellen, dass die vier Karten auf kleineren Bildschirmen nur mehr gequetscht werden, was für die Lesbarkeit nicht ideal ist. Glücklicherweise werden die Dinge mit Medienabfragen viel besser aussehen.

Um mit der Lösung des Problems zu beginnen, stellen festgelegte Haltepunkte sicher, dass Inhalte auf allen verschiedenen Bildschirmtypen ordnungsgemäß angezeigt werden.

Hier sind die folgenden Haltepunkte, die verwendet werden (Sie können auch Ihre eigenen verwenden, die Konzepte gelten weiterhin):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

Bis jetzt war es eine große Überlegung. Lassen Sie uns in die Mobile-First-Denkweise einsteigen und mit der Mindestbreite beginnen min-width: 40em Haltepunkt.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Mit diesen Änderungen werden Karten in voller Bildschirmbreite angezeigt und auf jedem Bildschirm, der kleiner als etwa 640 Pixel breit ist, untereinander gestapelt. Wenn Sie das Browserfenster auf etwas darüber erweitern, kehrt die Spalte von vier zurück. Das ist sinnvoll, weil es eine min-width von 40 cm gibt und wir hier die Reihe mit vier Karten erstellt haben.

Was hier fehlt, ist der Mittelweg. Für den mittleren Bereich ist es besser lesbar, zwei Karten hintereinander zu haben, als die vier gequetschten Karten. Bevor wir die Reihe mit zwei Karten herausfinden, muss eine weitere Medienabfrage hinzugefügt werden, um die größten Bildschirme aufzunehmen, die die Reihe mit vier Karten enthalten.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

In der neuen Medienabfrage mit einer Mindestbreite von min-width werden die vier Karten deklariert. Bei der Mindestbreite von min-width wird die Reihe von zwei Karten deklariert. Die Magie passiert mit dem Flex calc -Wert von 50 % – 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Mit dieser einfachen Änderung funktioniert es jetzt! Verkleinern und erweitern Sie das Browserfenster, um sicherzustellen, dass alles korrekt aussieht.

Sehen Sie dies auf Codepen.

Wenn Ihre Kartenreihen richtig aussehen, können Sie loslegen! Wenn Sie dieses Tutorial ausprobieren und eine ungleichmäßige letzte Reihe haben, lesen Sie weiter.

Dynamischer Inhalt und Abstand der letzten Kartenreihe

Abhängig von Ihrer Anzahl an Karten können Sie eine alberne letzte Reihe haben oder auch nicht. Wenn es eine volle letzte Reihe oder nur eine zusätzliche Karte gibt, gibt es kein Problem. Manchmal haben Sie Ihren Inhalt im Voraus geplant, aber wenn der Inhalt dynamisch ist, verhält sich die letzte Kartenreihe möglicherweise nicht wie beabsichtigt. Wenn mehr als eine zusätzliche Karte vorhanden ist und der Inhalt ausgerichtet ist, wird der Abstand zwischen ihnen gleichmäßig und möglicherweise nicht mit der/den Reihe(n) darüber ausgerichtet.

Um diesen Look zu bekommen, bedarf es einer anderen Denkweise. Ich würde argumentieren, dass dies nicht so effizient ist, aber es ist relativ einfach.

Das .cards und .card Styling wurde außerhalb einer Medienabfrage durchgeführt:

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

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Bei den Medienabfragen wird die Anzahl der Karten ermittelt:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Werfen Sie einen Blick auf Codepen, um die modifizierte Lösung zu sehen.

Hoffentlich gibt Ihnen dies einen grundlegenden Überblick über Flexbox-Konzepte, der Ihnen den Einstieg erleichtert. Flexbox hat eine ziemlich gute Browserunterstützung, und Kartenlayouts werden weiterhin in Website-Designs verwendet. Und denken Sie daran, dass Kartenlayouts nur der Anfang sind, wie Sie Flexbox nutzen können.

Weiter: Entwerfen Sie WordPress-Sites schneller

In diesem Leitfaden behandeln wir Tipps, wie Sie schneller arbeiten und Ihren WordPress-Workflow beschleunigen können. Entdecken Sie, wie Sie von der anfänglichen Site-Einrichtung bis zur Live-Übertragung stundenlange Arbeit von Ihrer täglichen Arbeit verkürzen können!

Laden Sie hier die kostenlose Anleitung herunter!

Was haben Sie noch mit Flexbox erstellt? Teilen Sie Ihre Projekte in den Kommentaren!