Cookbook-Vorlage

Hinweis: Dies ist eine Vorlagenseite für eine CSS-Cookbook-Seite. Bitte verwenden Sie dies als Rohvorlage, wenn Sie eine neue Cookbook-Seite erstellen. Kommentare in Kursivschrift sind Informationen darüber, wie Teile der Vorlage verwendet werden.

Beschreibung des Problems, das dieses Rezept löst, oder des Musters, das Sie demonstrieren.

Anforderungen

Was muss dieses Muster beinhalten oder welche Probleme muss es lösen? Listen Sie das hier auf.

Rezept

Ändern Sie den Beispielcode. Der letzte Parameter ist die Höhe des Live-Beispiels, die Sie nach Bedarf ändern können. Erwähnen Sie, dass Sie im MDN Playground auf „Abspielen“ in den Codeblöcken klicken können, um das Beispiel zu bearbeiten.

html
<div class="container">
  <div class="item">I am centered!</div>
</div>
css
.container {
  border: 2px solid rgb(75 70 74);
  border-radius: 0.5em;

  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;

  width: 10em;
}

Getroffene Entscheidungen

Erklären Sie Ihre Entscheidungen beim Erstellen des Musters. Warum haben Sie eine bestimmte Methode gewählt? Wenn Sie hier ein zusätzliches Beispiel hinzufügen möchten — zum Beispiel eine Version mit Fallbacks, tun Sie dies bitte. Dieser Abschnitt ist absichtlich locker gehalten, da Muster von sehr einfach bis komplexer reichen.

Nützliche Fallbacks oder alternative Methoden

Wenn es nützliche alternative Methoden zum Erstellen des Rezepts oder Fallback-Rezepte gibt, die Sie verwenden können, wenn Sie Browser unterstützen müssen, die es nicht unterstützen, fügen Sie sie in separaten Abschnitten hier unten hinzu.

Zugänglichkeitsbedenken

Fügen Sie dies hinzu, wenn es spezielle Dinge zu beachten gibt, was die Barrierefreiheit betrifft. Wenn es für Ihr Muster nicht relevant ist, kann dieser Punkt weggelassen werden.

Siehe auch

  • Links zu verwandten Eigenschaften: example-property
  • Links zu Artikeln, die zeigen, wie die Eigenschaft im Kontext verwendet wird: "Using … article"
  • Sehr gute externe Links. Haben Sie keine Angst vor externen Links, aber sie sollten herausragend sein und nicht nur unbedeutende Details erwähnen.