Erstellen Sie reaktionsfähige Karten gleicher Höhe mit modernem CSS (Magie von Flexbox und keine Medienabfragen)

Inhaltsverzeichnis

Einführung

Was ist unser Ziel?

Aufbau der Struktur mit semantischem HTML5

Hinzufügen des Stils mit modernem CSS
- CSS zurücksetzen
- Kartenlayout mit Flexbox entwerfen
- Gestalten Sie das Kartenbild
- Gestaltung des Karteninhalts
- Gestalten Sie den Kartenknopf
- Hover-Übergänge hinzufügen
- Verwendung von CSS-Variablen

Fazit

Einführung

Als Webentwickler stehen wir häufig vor der Notwendigkeit, Kartenkomponenten zu erstellen. Ob für eine Produkt-/Projektpräsentation, ein Benutzerprofil oder einen Blogbeitrag, Karten sind überall.

In der Vergangenheit war die Erstellung responsiver Layouts eine Herausforderung. Die Erstellung dieser Designs ist durch das Aufkommen moderner CSS-Techniken, insbesondere CSS Flexbox, deutlich einfacher und intuitiver geworden.

Flexbox vereinfacht die Erstellung responsiver Layouts. Wir können Elemente in einem Container einfach anordnen, ausrichten und platzieren, ohne komplexe Medienabfragen zu verwenden. Das bedeutet, dass wir Layouts erstellen können, die sich wunderbar an unterschiedliche Bildschirmgrößen und -ausrichtungen anpassen, ohne genaue Haltepunkte anzugeben.

Was ist unser Ziel?

Ziel ist es, mithilfe von CSS Flexbox reaktionsfähige Karten gleicher Höhe zu erstellen, ohne auf Haltepunkte angewiesen zu sein. Wir stellen sicher, dass jede Karte unabhängig von der Inhaltslänge die gleiche Höhe behält und sich nahtlos an unterschiedliche Bildschirmgrößen anpasst.

wichtige CSS-Eigenschaften für das Layout:

• Anzeige: Flex
• align-items
• Inhalt rechtfertigen
• flex-grow

Jetzt erkunden wir die Magie der CSS-Flexbox, indem wir die Karten erstellen!

Aufbau der Struktur mit semantischem HTML5

<main class="card-container">
<!--   First card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title one</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.</p>
    <button class="card-button" aria-label="Read more about Title one">Read More</button>
  </article>
  <!--   Second card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title two</h2>
    <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.</p>
    <button class="card-button" aria-label="Read more about Title two">Read More</button>
  </article>
  <!--   Third card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title three</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!</p>
    <button class="card-button" aria-label="Read more about Title three">Read More</button>
  </article>
</main>

Hinzufügen des Stils mit modernem CSS

CSS zurücksetzen

/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Der Körper

/* Ensure that our layout is centred horizontally and vertically on the page */
body {
    display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

Kartenlayout mit Flexbox entwerfen

/* Cards */
.card-container {
    display: flex; /* using CSS flexbox to display each card at the centre */
    justify-content: center;
    align-items: stretch; /* use stretch for equal height of all cards */
    gap: 1.5625rem; /* add space between each card */
    flex-wrap: wrap;
    padding: 1rem; 
    max-width: 100%; /* Prevent container from exceeding viewport width */
}

.card {
    display: flex;
    flex-direction: column;
    width: 20rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
    text-align: center;
    text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
    overflow: hidden;
}

Gestalten Sie den inneren Inhalt der Karte

Gestalten Sie das Kartenbild

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

Gestaltung des Karteninhalts

.card-title {
    font-size: 1.25rem;
    padding: 1rem;
    color: #3ca69f;
}

.card-description {
    flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
    padding: 0 1rem 1rem;
    font-size: 0.975rem;
    line-height: 1.5;
}

Den Kartenknopf gestalten

/* Cards button */
.card-button {
    align-self: center; /* placing the button at the center */
    margin: 1rem 0 3rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #3ca69f;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
}

Hover-Übergänge hinzufügen

.card {
    transition: 0.5s ease all;
}

.card-button {
    transition: 0.5s ease all;
}

/* cards hover effect */
.card:hover {
    background-color: #276662;
    color: #ffffff;
}

.card:hover > .card-button {
    background-color: #ffffff;
    color: #276662;
    font-weight: 700;
}

.card:hover > .card-title {
    color: #ffffff;
}

Verwenden von CSS-Variablen

/* Declare variables */
:root {
    --primary-color: #3ca69f;
    --secondary-color: #276662;
    --text-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --border-radius: 0.3125rem;
    --spacing: 1rem;
    --transition-duration: 0.5s;
}

Abschluss

Alles zusammenfügen

GO TOP

Das obige ist der detaillierte Inhalt vonErstellen Sie reaktionsfähige Karten gleicher Höhe mit modernem CSS (Magie von Flexbox und keine Medienabfragen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!