Testen Sie Ihre Fähigkeiten: Flexbox
Ziel dieses Fähigkeitstests ist es, Ihnen zu helfen zu beurteilen, ob Sie verstehen, wie flexbox und Flex-Elemente funktionieren. Im Folgenden finden Sie vier Sets von Designproblemen, die Sie mit Flexbox lösen können. Ihre Aufgabe ist es, die Probleme zu beheben.
Hinweis: Um Hilfe zu erhalten, lesen Sie unsere Anleitung zum Testen Ihrer Fähigkeiten. Sie können sich auch über einen unserer Kommunikationskanäle an uns wenden.
Interaktive Herausforderung
Zunächst geben wir Ihnen eine unterhaltsame, interaktive Flexbox-Herausforderung, die von unserem Lernpartner, Scrimba, erstellt wurde.
Sehen Sie sich das eingebettete Skript an und erledigen Sie alle Aufgaben in der Zeitleiste (die kleinen Geister-Symbole), indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Skript weiter ansehen, um zu prüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.
Flexbox 1
In dieser Aufgabe verwenden wir einige Listenelemente, um die Navigation für eine Website zu erstellen. Um die Aufgabe abzuschließen, verwenden Sie Flexbox, um die Listenelemente als Reihe anzuordnen, mit einem gleichen Abstand zwischen jedem Element.
Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
nav ul {
max-width: 750px;
list-style: none;
padding: 0;
margin: 0;
}
nav a:link,
nav a:visited {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
display: inline-block;
text-decoration: none;
}
nav ul {
/* Add styles here */
}
Wenn die Aufgabe abgeschlossen ist, sollten die Elemente so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Sie können display: flex anwenden und den Abstand mit der Eigenschaft justify-content steuern:
nav ul {
display: flex;
justify-content: space-between;
}
Flexbox 2
In dieser Aufgabe haben die Listenelemente alle unterschiedliche Größen, aber wir möchten, dass sie als drei gleich große Spalten angezeigt werden, unabhängig vom Inhalt in jedem Element.
Bonusfrage: Können Sie jetzt das erste Element doppelt so groß wie die anderen Elemente machen?
Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
max-width: 750px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
ul {
/* Add styles here */
}
li {
/* Add styles here */
}
Wenn die Aufgabe abgeschlossen ist, sollten die Elemente so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Es ist am besten, Abkürzungen zu verwenden, daher ist in diesem Szenario 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 anvisiert und flex: 2; (oder flex: 2 0 0; oder flex-grow: 2) setzt:
li:first-child {
flex: 2;
}
Flexbox 3
In dieser Aufgabe sollen Sie die Listenelemente in Reihen anordnen.
Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
width: 450px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
margin: 0.5em;
}
ul {
/* Add styles here */
}
li {
/* Add styles here */
}
Wenn die Aufgabe abgeschlossen ist, sollten die Elemente so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Diese Aufgabe erfordert ein Verständnis der Eigenschaft flex-wrap, um Flexzeilen umzubrechen. Zusätzlich müssen Sie, um sicherzustellen, dass das Ergebnis wie im Beispiel aussieht, flex: auto auf das Kind setzen (oder flex: 1 1 auto;).
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}