Articles
Einführung in CSS
Vergleich von Flexbox-, Grid- und Spalten-Layouts

Vergleich von Flexbox-, Grid- und Spalten-Layouts

Dieser Artikel erklärt den Vergleich zwischen Flexbox-, Grid- und Spalten-Layouts.

Sie lernen die Unterschiede zwischen Flexbox-, Grid- und Spalten-Layouts kennen und wann Sie welche Methode verwenden sollten.

YouTube Video

HTML zur Vorschau

css-layout-comparision.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>CSS Properties Example</title>
 7  <link rel="stylesheet" href="css-base.css">
 8  <link rel="stylesheet" href="css-layout-comparision.css">
 9</head>
10<body>
11  <!-- Header -->
12  <header>
13      <h1>CSS Properties For Layout</h1>
14  </header>
15  <!-- Main content -->
16  <main>
17    <header>
18        <h2>Layout Comparision</h2>
19    </header>
20    <article>
21      <h3>flex</h3>
22      <section>
23        <section class="sample-view">
24          <div class="flex-container">
25            <div class="flex-item">Item 1</div>
26            <div class="flex-item">Item 2</div>
27            <div class="flex-item">Item 3</div>
28            <div class="flex-item">Item 4</div>
29            <div class="flex-item">Item 5</div>
30            <div class="flex-item">Item 6</div>
31            <div class="flex-item">Item 7</div>
32            <div class="flex-item">Item 8</div>
33            <div class="flex-item">Item 9</div>
34          </div>
35        </section>
36      </section>
37    </article>
38    <article>
39      <h3>grid</h3>
40      <section>
41        <section class="sample-view">
42          <div class="grid-box">
43            <div class="grid-item item1">Item 1</div>
44            <div class="grid-item item2">Item 2</div>
45            <div class="grid-item item3">Item 3</div>
46            <div class="grid-item item4">Item 4</div>
47            <div class="grid-item item5">Item 5</div>
48            <div class="grid-item item6">Item 6</div>
49            <div class="grid-item item7">Item 7</div>
50            <div class="grid-item item8">Item 8</div>
51            <div class="grid-item item9">Item 9</div>
52          </div>
53        </section>
54      </section>
55    </article>
56    <article>
57      <h3>column</h3>
58      <section>
59        <section class="sample-view">
60          <section class="columns-container">
61            <p class="columns-item">Item 1</p>
62            <p class="columns-item">Item 2</p>
63            <p class="columns-item">Item 3</p>
64            <p class="columns-item">Item 4</p>
65            <p class="columns-item">Item 5</p>
66            <p class="columns-item">Item 6</p>
67            <p class="columns-item">Item 7</p>
68            <p class="columns-item">Item 8</p>
69            <p class="columns-item">Item 9</p>
70          </section>
71        </section>
72      </section>
73    </article>
74  </main>
75</body>
76</html>

Vergleich von Flexbox-, Grid- und Spalten-Layouts

CSS flex, grid und columns sind alles Techniken zum Ausrichten und Anordnen von Elementen, aber jede hat ihre eigenen Stärken und idealen Anwendungsfälle. Nachfolgend finden Sie eine klare Erklärung ihrer Unterschiede anhand eines Vergleichs.

Flexbox（display: flex） 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    flex-wrap: wrap;
 6    background-color: lightblue;
 7    height: 200px;
 8}
 9
10.flex-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 70px;
15    height: auto;
16}

Merkmale

  • Geeignet für eindimensionale Layouts – entweder horizontal oder vertikal.
  • Ermöglicht eine flexible Steuerung der Reihenfolge und Flexibilität von Elementen.
  • Am besten geeignet für kleine Layouts wie Navigationsleisten und Gruppen von Schaltflächen.

Vorteile

  • Passt die Größe von Kindelementen automatisch an.
  • Sie können die Reihenfolge der Elemente mithilfe von Eigenschaften wie flex-direction, flex-wrap und order ändern.

Beispiel für die Änderung der Anzeigereihenfolge

flex-direction

Als Beispiel für die Änderung der Anzeigereihenfolge setzen wir die Eigenschaft flex-direction auf column.

1.flex-container {
2    flex-direction: column;
3}

Wenn flex-direction auf column gesetzt ist, ändern sich die Elemente von einem horizontalen zu einem vertikalen Layout. Das Layout ändert sich von links-nach-rechts zu oben-nach-unten.

flex-wrap

Das Setzen von wrap-reverse für die Eigenschaft flex-wrap kehrt die Reihenfolge der umgebrochenen Zeilen von der üblichen Richtung um.

1.flex-container {
2    flex-direction: row;
3    flex-wrap: wrap-reverse;
4}

Auf diese Weise werden die Zeilen von unten nach oben gestapelt angezeigt.

1.flex-container {
2    flex-direction: column;
3    flex-wrap: wrap-reverse;
4}

Wenn flex-direction auf column und flex-wrap auf wrap-reverse gesetzt ist, werden die Elemente vertikal angeordnet, während die Spalten von rechts nach links umbrechen. Wie in diesem Beispiel ist die Spaltenreihenfolge von der üblichen links-nach-rechts-Reihenfolge umgekehrt, und Elemente werden von rechts nach links hinzugefügt.

Grid（display: grid） 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 100px 100px;
 4    grid-template-rows: 50px 50px 50px;
 5    gap: 20px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16}

Merkmale

  • Ideal für zweidimensionale Layouts.
  • Ermöglicht die klare Definition von Rasterlayouts.
  • Geeignet für komplexere Designs und die gesamte Seitenstruktur.

Vorteile

  • Zeilen und Spalten können gleichzeitig definiert werden.
  • Abschnitte können mithilfe benannter Bereiche (grid-area) platziert werden.
  • Kindelemente können frei innerhalb des Rasters platziert werden, was eine flexible Steuerung der Reihenfolge ermöglicht.

Beispiel für die Änderung der Anzeigereihenfolge

Als Beispiel für die Änderung der Anzeigereihenfolge verwenden wir die Eigenschaft grid-template-areas, um die Anzeigeorte festzulegen.

 1.grid-box {
 2    grid-template-areas:
 3        "item1 item4 item5"
 4        "item2 item6 item7"
 5        "item3 item8 item9";
 6}
 7
 8.item1 { grid-area: item1; }
 9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }

In diesem Beispiel wird die Eigenschaft grid-template-areas verwendet, um das gesamte Rasterlayout visuell zu definieren und jedem Bereich einen Namen zuzuweisen. Durch das Zuweisen des entsprechenden grid-area-Namens zu jedem Kind-Element werden diese an den gewünschten Positionen platziert. Durch die Verwendung von grid auf diese Weise können Sie nicht nur die Anzeigereihenfolge von Elementen frei ändern, sondern auch komplexe und einzigartige Layouts leicht erstellen.

Columns（column-count, column-width） 

 1.columns-container {
 2    background-color: lightblue;
 3    columns: 100px 3;
 4    column-gap: 20px;
 5    column-rule: 2px solid #333;
 6    padding: 10px;
 7}
 8
 9.columns-item {
10    background-color: lightskyblue;
11    text-align: center;
12    margin: 20px auto;
13    color: white;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    font-size: 1.2rem;
18    border: 1px solid #ccc;
19    height: 50px;
20}

Merkmale

  • Sie können einfach spaltenbasiertes Magazin-Design erstellen.
  • Ideal für fließenden Textinhalt.
  • Folgt der HTML-Quellreihenfolge, weshalb es weniger geeignet ist, die Reihenfolge von Elementen zu steuern.

Vorteile

  • Kann langen Text automatisch aufteilen.
  • Sie können sehr einfach zeitungsartige Layouts gestalten.

Vergleichstabelle

Feature / Anwendungsfall Flexbox Raster Spalten
Layout-Dimension 1D (horizontal oder vertikal) 2D (horizontal & vertikal) 1D (vertikal)
Am besten geeignet für Komponenten-Ausrichtung Struktur einer gesamten Seite Mehrspaltiger Text
Layout-Flexibilität Hoch (Reihenfolge & Größe) Sehr hoch (Flächendefinition) Niedrig (nur automatische Teilung)
Steuerung von Elementen Flexibel Klar definiert Schwer zu steuern
Layout-Intention Inhaltsgetrieben Layoutgetrieben Textgetrieben

Zusammenfassung

  • Flexbox ist ideal, wenn Sie Elemente in einer Zeile ausrichten möchten, wie z. B. Header oder Kartenlisten.
  • Raster eignet sich, wenn Sie das gesamte Layout gestalten möchten, wie z. B. die Struktur einer Webseite.
  • Spalten sind am besten geeignet, wenn Sie Text in mehrere Spalten formatieren möchten, wie z. B. in Artikeln oder Blogs.

Sie können sie auch nach Bedarf kombinieren. Zum Beispiel können Sie mit Grid das Gesamtlayout entwerfen und die internen Elemente mit Flex ausrichten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften im Zusammenhang mit der Spaltenlayout`overflow`- und `contain`-Eigenschaften