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-wrapundorderändern.
Beispiel für die Änderung der Anzeigereihenfolge
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.
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; }Wie Sie sehen können, kann grid nicht nur zur Änderung der Anzeigereihenfolge verwendet werden, sondern auch zur Erstellung einzigartiger Layouts.
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.