Testen Sie Ihre Fähigkeiten: Flexbox
Ziel dieses Tests ist es, zu überprüfen, ob Sie verstanden haben, wie sich Flexbox und Flex-Elemente verhalten. Unten finden Sie vier Sätze 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 unseren Testen Sie Ihre Fähigkeiten-Nutzungsleitfaden. Sie können uns auch über einen unserer Kommunikationskanäle kontaktieren.
Interaktive Herausforderung
Zunächst bieten wir Ihnen eine unterhaltsame, interaktive Flexbox-Herausforderung, die von unserem Lernpartner Scrimba erstellt wurde.
Sehen Sie sich das eingebettete Scrim an und erledigen Sie alle Aufgaben auf der Timeline (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 sind die Listenelemente die Navigation für eine Website. Um die Aufgabe zu vervollständigen, verwenden Sie Flexbox, um die Listenelemente als Reihe anzuordnen, mit einem gleichen Abstand zwischen jedem Element.
Ihr Endergebnis sollte wie das untenstehende Bild 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: 700px;
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 */
}
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, wir möchten jedoch, dass sie als drei gleich große Spalten angezeigt werden, unabhängig vom Inhalt in jedem Element.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Bonusfrage: Können Sie nun 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: 700px;
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 */
}
Klicken Sie hier, um die Lösung anzuzeigen
Es ist am besten, Verkürzungen zu verwenden, daher ist in diesem Szenario flex: 1 wahrscheinlich die beste Antwort, und so wäre das optimalste Ergebnis:
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) festlegt:
li:first-child {
flex: 2;
}
Aufgabe 3
In dieser Aufgabe möchten wir, dass Sie die Listenelemente in Reihen anordnen, wie im folgenden Bild dargestellt:
<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 */
}
Klicken Sie hier, um die Lösung anzuzeigen
Diese Aufgabe erfordert das Verständnis der flex-wrap-Eigenschaft, um Flexzeilen zu umbrechen. Zusätzlich müssen Sie, um sicherzustellen, dass es wie das Beispiel aussieht, flex: auto auf das Kind (oder flex: 1 1 auto;) setzen.
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}