Grid und Flexbox-CSS-Tutorial-php.cn

Grid und Flexbox

王林

Freigeben： 2024-09-10 18:00:09

Original

733 Leute haben es durchsucht

Grid and Flexbox

Grid und Flexbox sind beide leistungsstarke Layoutsysteme in CSS, die jeweils für unterschiedliche Arten von Layoutaufgaben entwickelt wurden. Hier ist ein Vergleich der beiden, zusammen mit Beispielen, um ihre Unterschiede zu veranschaulichen:

Flexbox

Zweck:
Flexbox ist für eindimensionale Layouts konzipiert. Es verwaltet die Ausrichtung und den Abstand von Elementen entlang einer einzelnen Achse (entweder Zeile oder Spalte).

Hauptmerkmale:

Elemente horizontal oder vertikal ausrichten.
Verteilen Sie den Platz innerhalb eines Containers.
Kontrollieren Sie die Reihenfolge und Größe der Artikel flexibel.

Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* Distributes space between items */
            align-items: center; /* Aligns items vertically in the center */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
            flex: 1; /* Makes items flexible */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Nach dem Login kopieren

Dargestellte Funktionen:

Elemente werden in einer Reihe mit verteiltem Abstand zwischen ihnen ausgerichtet.
Artikel werden vertikal im Container zentriert.
Elemente wachsen und schrumpfen je nach verfügbarem Platz.

Netz

Zweck:
Grid ist für zweidimensionale Layouts konzipiert. Es verarbeitet sowohl Zeilen als auch Spalten gleichzeitig und ermöglicht so komplexe Layouts.

Hauptmerkmale:

Erstellen Sie sowohl Zeilen als auch Spalten.
Steuern Sie die Platzierung von Elementen in einem Raster.
Elemente über mehrere Zeilen und Spalten verteilen.

Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
            grid-gap: 10px; /* Adds space between grid items */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item:nth-child(2) {
            grid-column: span 2; /* Makes the second item span two columns */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Nach dem Login kopieren

Dargestellte Funktionen:

Erstellt ein Raster mit drei gleichen Spalten.
Elemente werden mit Lücken dazwischen im Raster platziert.
Das zweite Element erstreckt sich über zwei Spalten.

Zusammenfassung

Flexbox: Am besten für eindimensionale Layouts (entweder Zeile oder Spalte). Ideal zum Ausrichten von Gegenständen, zum Verteilen von Platz und zum Verwalten einfacher Layouts.
Raster: Am besten für zweidimensionale Layouts (Zeilen und Spalten) geeignet. Ideal für komplexere Designs, die eine präzise Platzierung und Kontrolle über beide Dimensionen erfordern.

Die Wahl zwischen Flexbox und Grid hängt von der Komplexität Ihres Layouts ab und davon, ob Sie eine eindimensionale oder zweidimensionale Steuerung benötigen. Oft können beide zusammen verwendet werden, um das gewünschte Layout zu erreichen.

Das obige ist der detaillierte Inhalt vonGrid und Flexbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!