CSS Flexbox-Zentrierung | Responsive Web Design

Einführung

In diesem Lab werden wir das Konzept der Zentrierung mit Flexbox in CSS erkunden. Sie werden lernen, wie Sie untergeordnete Elemente horizontal und vertikal innerhalb eines übergeordneten Elements mithilfe von Flexbox zentrieren. Am Ende dieses Labs werden Sie in der Lage sein, responsive und visuell ansprechende Layouts mit Flexbox-Zentrierungstechniken zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/selectors -.-> lab-35198{{"Responsive Flexbox-Zentrierungstechniken"}} css/box_model -.-> lab-35198{{"Responsive Flexbox-Zentrierungstechniken"}} css/width_and_height -.-> lab-35198{{"Responsive Flexbox-Zentrierungstechniken"}} css/display_property -.-> lab-35198{{"Responsive Flexbox-Zentrierungstechniken"}} css/flexbox -.-> lab-35198{{"Responsive Flexbox-Zentrierungstechniken"}} end

Flexbox-Zentrierung

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein untergeordnetes Element sowohl horizontal als auch vertikal innerhalb eines übergeordneten Elements mithilfe von Flexbox zu zentrieren, folgen Sie diesen Schritten:

Erstellen Sie eine Flexbox-Layout, indem Sie die display-Eigenschaft des übergeordneten Elements auf flex setzen.
Verwenden Sie die justify-content-Eigenschaft, um das untergeordnete Element horizontal zu zentrieren, indem Sie ihren Wert auf center setzen.
Verwenden Sie die align-items-Eigenschaft, um das untergeordnete Element vertikal zu zentrieren, indem Sie ihren Wert auf center setzen.
Fügen Sie das untergeordnete Element innerhalb des übergeordneten Elements hinzu.

Hier ist ein Beispielcodeausschnitt:

<div class="flexbox-centering">
  <div>Zentrierter Inhalt.</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu Flexbox-Zentrierung abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.