So verwenden Sie CSS Grid und Flexbox Tutorial zusammen mit Tutorial

CSS Grid und Flexbox haben jeweils ein eigenes Fachwissen, das am besten zusammen funktioniert. Grid ist ein zweidimensionales Layout, das für die Gesamtseitenstruktur geeignet ist, z. Flexbox ist ein eindimensionales Layout, das besser für die interne Anordnung von Komponenten geeignet ist, z. B. Navigationsleiste, Tastegruppe, Kartenliste usw. Verwenden Sie beispielsweise das Gitter in der Mitte des Dreispalten-Layouts und blockieren Sie dann auf und ab und verwenden Sie Flexbox, um mehrere Tasten in einer Reihe automatisch auszurichten. Die tatsächliche Kombinationsmethode lautet: Der äußere Container verwendet Anzeige: Grid, um das Gesamtgerüst zu definieren, und die untergeordneten Elemente werden unter Verwendung von Display: Flex in jedem Bereich angeordnet. Zu den allgemeinen Strukturen gehört die Verwendung von Grid, um Blöcke auf der gesamten Seite zu teilen, und die Verwendung von Flexbox, um Elemente in der Navigationsleiste, der Schaltflächengruppe und der Kartenliste auszurichten. Beachten Sie, dass Sie kein Gitter und Flexbox gleichzeitig auf demselben Container festlegen sollten. Nachdem das übergeordnete Raster verwendet wird, muss das Kind die Anzeige: Flex separat festlegen, um wirksam zu werden. In der verschachtelten Struktur sollten Sie auch Wartungsschwierigkeiten aufgrund von zu tiefem Niveau vermeiden.

Wenn Sie ein modernes Weblayout erstellen möchten, sind CSS -Gitter und Flexbox die beiden praktischsten Tools. Sie haben jeweils unterschiedliche Szenarien, aber wenn sie zusammen verwendet werden, können sie komplexeste Layoutprobleme lösen. Der Schlüssel ist nicht, wer zu wählen ist, sondern wen zu verwenden ist, sondern wen zu verwenden ist.

Wann verwendet Grid, wann Flexbox verwendet werden soll?

Einfach ausgedrückt: Grid ist ein zweidimensionales Layout (gesteuert durch Zeilen und Spalten zusammen) , das für die Gesamtseitenstruktur geeignet ist, z. B. die Anordnung der Header, der Seitenleiste, des Hauptinhaltsbereichs und der Fußzeile. Flexbox ist ein eindimensionales Layout (jeweils nur eine Zeile oder eine Spalte wird gesteuert) , die besser für die interne Anordnung von Komponenten wie Navigationsstangen, Tastengruppen, Kartenlisten usw. geeignet ist.

Zum Beispiel:

• Wenn Sie ein dreispaliges Layout erstellen und in der Mitte auf und ab geteilt werden können, ist das Gitter besser geeignet.
• Wenn Sie nur möchten, dass ein paar Tasten automatisch ausgerichtet und ausgerichtet sind, ist Flexbox einfacher.

Auf einer vollständigen Seite können Sie also mit dem Bereich den Bereich auf der Außenschicht teilen und Elemente auf der inneren Ebene mit Flexbox anordnen .

Wie benutze ich es in Kombination? Hängen von der Struktur ab

Gemeinsame Praktiken sind:

• Verwenden Sie display: grid um den gesamten Seitenrahmen zu definieren
• Verwenden Sie display: flex in jedem Bereich, um Kinderelemente zu arrangieren

Zum Beispiel:

 .Container {
  Anzeige: Grid;
  Grid-Template-Säulen: 200px 1fr 300px;
}

.sidebar {
  Anzeige: Flex;
  Flex-Richtung: Säule;
  Rechtfertigungsbekämpfung: Weltraum zwischen;
}

Auf diese Weise wird die linke Säule zu einer vertikal verteilten Struktur und wirkt sich nicht auf das Layout anderer Bereiche aus.

Gemeinsame Kombinationsstrukturen:

• Die gesamte Seite ist in Partitionen unter Verwendung eines Netzes unterteilt
• Verwenden Sie Flexbox für Navigationsstangen und Knopfgruppen
• Verwenden Sie Flexbox, um Titel, Bilder und andere Elemente in der Kartenliste auszurichten

Hinweis: Leg dich nicht mit Richtung und Ebene an

Obwohl die beiden gemeinsam verwendet werden können, sind Sie sich einiger fehleranfälliger Bereiche bewusst:

• Setzen Sie kein Raster und Flexbox auf einen Behälter, da nur einer wirksam wird
• Der Elternteil verwendet Grid. Wenn das Kind Flexbox verwenden möchte, muss es display: flex für das Kind separat.
• Versuchen Sie in der verschachtelten Struktur, die logische Logik klar und nicht zu tief zu nisten, da es sonst schwierig ist, aufrechtzuerhalten.

Lassen Sie mich Ihnen ein Beispiel für Trampeln von Tricks geben:

 <div class = "grid-container">
  <div class = "flex-box">
    <spann> Artikel 1 </span>
    <spannung> Artikel 2 </span>
  </div>
</div>

 .Grid-container {
  Anzeige: Grid;
  Grid-Template-Säulen: Wiederholung (3, 1fr);
}

.flex-Box {
  Anzeige: Flex;
  Lücke: 10px;
}

Dies ist eine gute Idee, aber wenn Sie versehentlich ein grid in .flex-box hinzufügen, wird es zu einem Gitterbehälter und Flex wird fehlschlagen.

Grundsätzlich ist das. Es mag sich zunächst ein wenig verwirrt anfühlen, aber denken Sie daran: Grid steuert die große Struktur. Flexbox ist für die Anordnung von Details verantwortlich und verwendet sie dann auf verschiedenen Ebenen separat, sodass es die meisten Layoutanforderungen problemlos erfüllen kann.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS Grid und Flexbox Tutorial zusammen mit Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!