Atombasiertes Flexbox-Layout mit CSS implementieren

Einführung

In diesem Projekt lernst du, wie du eine attributbasierte atomare Flexbox-Layout mit CSS implementierst. Atomare CSS ist eine beliebte CSS-Konstruktionsmethode, die das Schreiben von CSS vereinfacht, indem attributbasierte Stile verwendet werden.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du eine attributbasierte atomare Flexbox-Layout mit CSS implementierst
• Wie du die einzelnen Flexbox-Elemente im Flexbox-Layout gestylst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Attributbasiertes CSS verwenden, um ein flexibles Layout zu erstellen
• Die einzelnen Elemente innerhalb eines Flexbox-Layouts stylen
• Die Vorteile des Einsatzes von atomarer CSS für eine effiziente und wartbare CSS-Entwicklung verstehen

Projektstruktur einrichten

Atomare CSS ist eine in letzter Zeit sehr beliebte CSS-Konstruktionsmethode, und attributbasierte (Attributify) atomare CSS vereinfacht das Schreiben von CSS weiter.

Zum Beispiel implementieren wir traditionell flex, indem wir einen Klassenbezeichner auf dem Element erstellen und das Element dann über den Selektoren in CSS auswählen:

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

Mit attributierter atomarer CSS können wir das Gleiche auf die folgende Weise tun.

<div flex></div>

Um loszulegen, öffnen Sie die Experimentumgebung, und die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
└── index.html

Dabei gilt:

• css/style.css ist die Styledatei, in der der Code ergänzt werden muss.
• index.html ist die Hauptseite.

Klicken Sie in der unteren rechten Ecke auf "Go Live", um Port 8080 zu öffnen und die index.html-Seite im Browser anzuschauen. Das Ergebnis wird wie folgt aussehen:

Attributbasiertes atomares Flexbox-Layout implementieren

In diesem Schritt lernst du, wie du ein attributbasiertes atomares Flexbox-Layout mit CSS implementierst.

1. Öffnen Sie die Datei css/style.css.
2. Finden Sie den Abschnitt /* TODO */ in der CSS-Datei.
3. Fügen Sie die folgende CSS-Regel hinzu, um das attributbasierte atomare Flexbox-Layout zu implementieren:

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

Diese Regel zielt auf das div-Element mit dem Attribut flex="~ col" und wendet die erforderlichen Stile an, um ein vertikales Flexbox-Layout zu erstellen.

Die Eigenschaft display: flex setzt das Element auf das Verwenden des Flexbox-Layouts, und die Eigenschaft flex-direction: column setzt die Flexrichtung auf vertikal.

4. Speichern Sie die Datei style.css.
5. Gehen Sie zurück zu Ihrem Browser und aktualisieren Sie die Seite. Sie sollten das folgende Ergebnis sehen:

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.