Titelseite > Programmierung > Erstellen Sie reaktionsfähige Karten gleicher Höhe mit modernem CSS (Magie von Flexbox und keine Medienabfragen)
Durchsuche:120
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
- Den Kartenknopf gestalten
- Hinzufügen von Hover-Übergängen
- CSS-Variablen verwenden
Abschluss
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.
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:
Jetzt erkunden wir die Magie der CSS-Flexbox, indem wir die Karten erstellen!
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 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 */
}
/* 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;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.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;
}
/* 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;
}
.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;
}
/* 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;
}
ZUM SEITENANFANG
Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.
Copyright© 2022 湘ICP备2022001581号-3