CSS-Layouts – Floats, Flexbox und Grid

Vorlesung 5: CSS-Layouts – Floats, Flexbox und Grid

In dieser Vorlesung befassen wir uns mit den wesentlichen Techniken zum Erstellen von Layouts in CSS. Wenn Sie verstehen, wie Sie Ihre Inhalte mithilfe von Floats, Flexbox und Grid strukturieren, können Sie reaktionsfähige und gut organisierte Websites erstellen. Am Ende dieser Vorlesung werden Sie in der Lage sein, Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen und Geräte anpassen.

CSS-Layouttechniken verstehen

CSS bietet mehrere Layouttechniken mit jeweils eigenen Anwendungsfällen. Wir werden drei grundlegende Methoden behandeln: Floats, Flexbox und Grid.

1. Schwimmt

Floats wurden ursprünglich zum Umschließen von Bildern mit Text entwickelt, werden jedoch häufig zum Erstellen von Layouts verwendet. Obwohl sie größtenteils durch neuere Techniken ersetzt wurden, sind sie in bestimmten Situationen immer noch nützlich.

• Beispiel:

  .left {
    float: left;
    width: 50%;
  }

  .right {
    float: right;
    width: 50%;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

• HTML:

  <div class="clearfix">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>
  </div>

In diesem Beispiel werden zwei Divs nach links und rechts verschoben, wodurch ein zweispaltiges Layout entsteht.

2. Flexbox

Flexbox ist eine modernere Layouttechnik, die leistungsstarke Ausrichtungs- und Verteilungsfunktionen bietet. Es eignet sich perfekt zum Erstellen flexibler und ansprechender Layouts.

• Beispiel:

  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-item {
    flex: 1;
    margin: 10px;
  }

• HTML:

  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>

Hier verwendet der .flex-Container Flexbox, um drei Gegenstände gleichmäßig im Container zu verteilen, mit gleichem Abstand zwischen ihnen.

3. CSS-Raster

Grid ist das leistungsstärkste Layoutsystem in CSS, mit dem Sie komplexe, zweidimensionale Layouts mit präziser Kontrolle über Zeilen und Spalten erstellen können.

• Beispiel:

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
  }

  .grid-item {
    padding: 20px;
    background-color: #ccc;
  }

• HTML:

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

In diesem Beispiel wird ein Rasterlayout mit zwei Spalten erstellt. Die erste Spalte nimmt einen Bruchteil des Platzes ein, die zweite zwei Bruchteile, mit einer Lücke von 10 Pixeln zwischen den Elementen.

Praxisbeispiel:

Lassen Sie uns mit Flexbox ein einfaches Webseitenlayout erstellen, um die Kopfzeile, den Hauptinhalt und die Fußzeile anzuordnen.

HTML:

<div class="flex-container">
  <header class="flex-item header">Header</header>
  <main class="flex-item main">Main Content</main>
  <footer class="flex-item footer">Footer</footer>
</div>

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

In diesem Beispiel:

• Kopf- und Fußzeile erhalten eine feste Höhe und Hintergrundfarbe, während der Hauptinhalt erweitert wird, um den verbleibenden Platz auszufüllen.
• Flexbox wird verwendet, um den Inhalt vertikal auszurichten und zu verteilen.

Übungsübung

1. Erstellen Sie eine einfache Webseite mit Floats, um ein zweispaltiges Layout zu erstellen.
2. Verwenden Sie Flexbox, um eine reaktionsfähige Navigationsleiste zu entwerfen.
3. Experimentieren Sie mit CSS Grid, um ein mehrspaltiges Layout mit unterschiedlichen Zeilen- und Spaltengrößen zu erstellen.

Nächstes Thema: In der nächsten Vorlesung befassen wir uns mit Responsive Webdesign mit Medienabfragen, wo Sie lernen, wie Sie Ihre Layouts an verschiedene Bildschirmgrößen anpassen und anpassen Geräte. Bleiben Sie dran!

Folge mir auf LinkedIn

Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS-Layouts – Floats, Flexbox und Grid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!