Testen Sie Ihre Fähigkeiten: Flexbox
Das Ziel dieses Fertigkeitstests besteht darin, zu bewerten, ob Sie verstehen, wie sich flexbox und Flexelemente verhalten. Unten sind vier gängige Designmuster aufgeführt, die Sie mit Flexbox erstellen könnten. Ihre Aufgabe ist es, sie zu bauen.
Hinweis: Klicken Sie auf "Play" in den Codeblöcken unten, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.
Aufgabe 1
In dieser Aufgabe sind die Listenelemente die Navigation für eine Website. Diese sollten als Reihe angeordnet werden, mit einem gleichmäßigen Abstand zwischen jedem Element.
Ihr endgültiges Ergebnis sollte wie das folgende Bild aussehen:
Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/products">Our Products</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
nav ul {
}
Klicken Sie hier, um die Lösung anzuzeigen
Sie können display: flex
anwenden und den Abstand mit der justify-content
-Eigenschaft steuern:
nav ul {
display: flex;
justify-content: space-between;
}
Aufgabe 2
In dieser Aufgabe sind die Listenelemente alle unterschiedlich groß, aber wir möchten, dass sie als drei gleich große Spalten angezeigt werden, unabhängig davon, welcher Inhalt in jedem Element ist.
Ihr endgültiges Ergebnis sollte wie das folgende Bild aussehen:
Bonusfrage: Können Sie jetzt das erste Element doppelt so groß wie die anderen machen?
Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:
<ul>
<li>I am small</li>
<li>I have more content than the very small item.</li>
<li>
I have lots of content. So much content that I don't know where it is all
going to go. I'm glad that CSS is pretty good at dealing with situations
where we end up with more words than expected!
</li>
</ul>
ul {
}
li {
}
Klicken Sie hier, um die Lösung anzuzeigen
Es ist am besten, Kurzschreibweisen zu verwenden. In diesem Szenario ist flex: 1
wahrscheinlich die beste Antwort und das optimalste Ergebnis wäre:
ul {
display: flex;
}
li {
flex: 1;
}
Für die Bonusfrage, fügen Sie einen Selektor hinzu, der das erste Element anspricht und flex: 2;
(oder flex: 2 0 0;
oder flex-grow: 2
) setzt:
li:first-child {
flex: 2;
}
Aufgabe 3
In dieser Aufgabe gibt es zwei Elemente im folgenden HTML: ein <div>
-Element mit einer Klasse parent
, das ein weiteres <div>
-Element mit einer Klasse child
enthält. Verwenden Sie Flexbox, um das Kind innerhalb des Elternteils zu zentrieren. Es gibt mehr als eine mögliche Lösung.
Ihr endgültiges Ergebnis sollte wie das folgende Bild aussehen:
Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="parent">
<div class="child">Center me.</div>
</div>
Klicken Sie hier, um die Lösung anzuzeigen
Es ist nur notwendig, die Stile des Elternteils zu ändern, um ein Element horizontal und vertikal zu zentrieren:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Aufgabe 4
In dieser Aufgabe möchten wir, dass Sie diese Elemente in Reihen anordnen, wie im folgenden Bild gezeigt:
Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:
<ul>
<li>Turnip</li>
<li>greens</li>
<li>yarrow</li>
<li>ricebean</li>
<li>rutabaga</li>
<li>endive</li>
<li>cauliflower</li>
<li>sea lettuce</li>
<li>kohlrabi</li>
<li>amaranth</li>
</ul>
ul {
}
li {
}
Klicken Sie hier, um die Lösung anzuzeigen
Diese Aufgabe erfordert ein Verständnis der flex-wrap
-Eigenschaft, um Flexzeilen zu umbrechen. Zusätzlich müssen Sie sicherstellen, dass Sie etwas erhalten, das wie das Beispiel aussieht, indem Sie flex: auto
auf das Kind setzen (oder flex: 1 1 auto;
).
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}