Testen Sie Ihre Fähigkeiten: Flexbox
Das Ziel dieses Fähigkeitentests ist es, Ihnen zu helfen, zu bewerten, ob Sie verstehen, wie Flexbox und Flex-Elemente funktionieren. Unten finden Sie vier Sätze von Designproblemen, die Sie mithilfe von Flexbox lösen können. Ihre Aufgabe ist es, die Probleme zu beheben.
Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Anleitung zum Testen Ihrer Fähigkeiten. Sie können sich auch über einen unserer Kommunikationskanäle mit uns in Verbindung setzen.
Interaktive Herausforderung
Zunächst bieten wir Ihnen eine unterhaltsame und interaktive Flexbox-Herausforderung an, die von unserem Lernpartner, Scrimba, erstellt wurde.
Sehen Sie sich das eingebettete Scrim an und erledigen Sie alle Aufgaben in der Zeitleiste (die kleinen Geistersymbole), indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Scrim weiter ansehen, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.
Aufgabe 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 eine Reihe mit gleichem Abstand zwischen jedem Element anzuordnen.
Ihr Endergebnis sollte wie diese fertige Darstellung aussehen:
<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 */
}
Dies ist der Ausgangszustand der Aufgabe:
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;
}
Aufgabe 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 davon, welche Inhalte in jedem Element sind.
Ihr Endergebnis sollte wie die folgende Darstellung aussehen:
Zusatzfrage: Können Sie jetzt das erste Element doppelt so groß wie die anderen Elemente machen?
<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 */
}
Dies ist der Ausgangszustand der Aufgabe:
Klicken Sie hier, um die Lösung anzuzeigen
Es ist am besten, Abkürzungen zu verwenden. In diesem Fall ist flex: 1 wahrscheinlich die beste Antwort, und das optimalste Ergebnis wäre:
ul {
display: flex;
}
li {
flex: 1;
}
Für die Zusatzfrage 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 möchten wir, dass Sie die Listenelemente in Reihen anordnen, wie in der fertigen Darstellung unten gezeigt:
<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 */
}
Dies ist der Ausgangszustand der Aufgabe:
Klicken Sie hier, um die Lösung anzuzeigen
Diese Aufgabe erfordert ein Verständnis der Eigenschaft flex-wrap, um Flex-Linien zu umbrechen. Zusätzlich müssen Sie, um sicherzustellen, dass Ihr Ergebnis wie das Beispiel aussieht, flex: auto auf das Kind (oder flex: 1 1 auto;) setzen.
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}