Testen Sie Ihre Fähigkeiten: Flexbox
Das Ziel dieses Fähigkeitstests ist es zu beurteilen, ob Sie verstehen, wie Flexbox und Flex-Elemente funktionieren. Unten finden Sie vier gängige Designmuster, die Sie mit Flexbox erstellen könnten. Ihre Aufgabe ist es, diese nachzubauen.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.
Aufgabe 1
Bei dieser Aufgabe sind die Listenelemente die Navigation für eine Website. Sie sollten als eine Zeile angeordnet werden, mit einem gleichen Abstand zwischen jedem Element.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.
Aufgabe 2
Bei dieser Aufgabe sind die Listenelemente unterschiedlich groß, aber wir möchten, dass sie als drei gleich große Spalten angezeigt werden, unabhängig davon, welcher Inhalt in jedem Element enthalten ist.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Zusätzliche Frage:
- Können Sie das erste Element jetzt doppelt so groß machen wie die anderen Elemente?
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.
Aufgabe 3
Bei dieser Aufgabe gibt es zwei Elemente im HTML unten, ein <div>-Element mit einer Klasse parent, das ein weiteres <div>-Element mit der Klasse child enthält. Verwenden Sie Flexbox, um das Kind in der Mitte des Elternteils zu zentrieren. Beachten Sie, dass es hier nicht nur eine mögliche Lösung gibt.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.
Aufgabe 4
Bei dieser Aufgabe möchten wir, dass Sie diese Elemente zu Reihen arrangieren, wie im Bild unten gezeigt:
Versuchen Sie den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.