Tailwind CSS Layout-Klassen

Tailwind CSS bietet eine umfangreiche Sammlung von Layout-bezogenen Klassen, mit denen Entwickler jeden Aspekt einer Seite mit großer Flexibilität steuern können.

Als Nächstes erläutern wir im Detail einige wichtige Layout-bezogene Klassen.

1. Seitenverhältnis

Die Seitenverhältnis-Klassen helfen Ihnen, das Seitenverhältnis eines Elements festzulegen und zu verhindern, dass es im responsiven Design gestreckt oder gestaucht wird.

Hauptklassen:

2. Container

Die Container-Klasse macht Container-Elemente responsiv für unterschiedliche Bildschirmgrößen; sie wird häufig verwendet, um die maximale Breite des Inhalts festzulegen.

Hauptklassen:

• container: Macht das Element zu einem responsiven Container.
• mx-auto: Zentriert den Container horizontal.

Wenn Sie diese Klassen verwenden, können Sie Container mit responsiven maximalen Breiten erstellen, was beim Erstellen von Layouts sehr nützlich ist, insbesondere wenn Sie die Breite von Inhalten begrenzen möchten, um die Lesbarkeit zu verbessern.

In diesen Beispielen nimmt der erste<div>immer 100 % der Breite ein, während der zweite<div>auf großen Bildschirmen (lg) und darüber wird seine maximale Breite auf 1024px begrenzt.mx-autoDie Klasse wird verwendet, um den Container horizontal zu zentrieren.

3. Spalten

Die Columns-Klassen werden verwendet, um mehrspaltige Layouts zu implementieren.

Sie können die Anzahl der Spalten und den Abstand zwischen den Spalten steuern.

Hauptklassen:

• columns-{n}: Legt die Anzahl der Spalten fest.
• space-x-{size}: Legt den Abstand zwischen den Spalten fest.

4. Paginierung

Die folgenden Klassen helfen Entwicklern, die Paginierung und das Spaltenlayout von Dokumenten besser zu steuern, um die Lesbarkeit und Ästhetik der Druckausgabe zu verbessern.

Hauptklassen:

• break-after-{value}: Steuert das Verhalten nach einem Seiten-/Spaltenumbruch.
• break-before-{value}: Steuert das Verhalten vor einem Seiten-/Spaltenumbruch.
• break-inside-{value}: Steuert das Verhalten von Umbrüchen innerhalb eines Elements.

Die oben genannten Klassen werden verwendet, um das Paginierungs- oder Spaltenumbruchverhalten von Inhalten in Druck- oder Mehrspalten-Layouts zu steuern:

• break-after-autoErlaubt dem Browser zu entscheiden, ob nach dem Element ein Umbruch erfolgt.
• break-after-avoidWeist den Browser an, einen Umbruch nach dem Element so weit wie möglich zu vermeiden.

Die oben genannten Klassen werden verwendet, um das Seitenumbruch- oder Spaltenumbruchverhalten von Inhalten in Druck- oder Mehrspaltenlayouts zu steuern.

• break-before-autoErlaubt dem Browser zu entscheiden, ob vor dem Element ein Umbruch erfolgt.
• break-before-avoidWeist den Browser an, einen Umbruch vor dem Element so weit wie möglich zu vermeiden.

Die oben genannten Klassen werden verwendet, um zu steuern, ob Inhalte innerhalb eines Elements in Druck- oder Mehrspaltenlayouts umbrechen dürfen.

• break-inside-autoErmöglicht dem Browser zu entscheiden, ob innerhalb des Elements umgebrochen wird.
• break-inside-avoidWeist den Browser an, einen Umbruch innerhalb des Elements so weit wie möglich zu vermeiden.

In diesem Beispiel,<div>das Element wird auf ein zweispaltiges Layout gesetzt (columns-2), das vier enthält<p>Absätze. Der zweite<p>Absatz hat einebreak-after-columnKlasse, die nach diesem Absatz einen Spaltenumbruch erzwingt, aber keinen Seitenumbruch zulässt. Das bedeutet, dass der Inhalt nach dem zweiten Absatz, wenn genügend Inhalt vorhanden ist, eine neue Spalte beginnt, anstatt in der nächsten Zeile derselben Spalte fortzufahren. Die anderen Absätze haben keine speziellen Anweisungen für Spaltenumbrüche, sodass sie entsprechend ihrem Inhalt natürlich fließen.

5. Textumbruch

Im Folgenden sind die Utility-Klassen in Tailwind CSS aufgeführt, mit denen gesteuert wird, wie Elementfragmente über mehrere Zeilen, Spalten oder Seiten hinweg gerendert werden, zusammen mit ihren entsprechenden CSS-Eigenschaften:

Die oben genannten Klassen werden verwendet, um zu steuern, wie sich die Dekorationen eines Elements (wie Rahmen und Hintergründe) in mehrspaltigen Layouts oder bei der Paginierung verhalten.

• box-decoration-cloneBewirkt, dass jedes Box-Fragment die vollständige Dekoration anzeigt.
• box-decoration-slice„Schneidet“ die Dekoration an der Stelle, an der die Box geteilt wird, und sorgt dafür, dass die Dekoration visuell durchgehend bleibt.

Diese Utility-Klassen helfen Entwicklern, das visuelle Erscheinungsbild von Elementen in komplexen Layouts besser zu steuern.

6. Box-Sizing

Tailwind CSS bietet zwei Utility-Klassen, um das Box-Modell eines Elements zu steuern (box-sizing):

• box-border: Berechnet die Gesamtgröße des Elements einschließlich Padding und Rahmen.
• box-content: Berechnet die Größe des Elements ohne Padding und Rahmen.

1、box-border

CSS-Eigenschaft:

box-sizing: border-box;

Verwende die Utility-Klasse box-border, um die box-sizing-Eigenschaft des Elements auf border-box zu setzen. Das bedeutet: Wenn du eine Höhe oder Breite für das Element angibst, schließt der Browser die Rahmen und das Padding des Elements in diese Größe ein.

Wenn die Größe eines Elements 100px × 100px beträgt, mit einem 2px-Rahmen und 4px-Innenabstand, beträgt die gesamte gerenderte Größe des Elements 112px × 112px.

2. box-content

CSS-Eigenschaft:

box-sizing: content-box;

Verwenden Sie die Utility-Klasse box-content, um die box-sizing-Eigenschaft des Elements auf content-box zu setzen. Das bedeutet, dass der Browser Rahmen und Innenabstand zusätzlich zur angegebenen Breite oder Höhe des Elements hinzufügt.

Wenn die Größe eines Elements 100px × 100px beträgt, mit einem 2px-Rahmen und 4px-Innenabstand, beträgt die tatsächliche gerenderte Größe des Elements 112px × 112px, mit einem inneren Inhaltsbereich von 100px × 100px.

display-Eigenschaft

Die display-Eigenschaft wird verwendet, um den Anzeigetyp eines Elements zu steuern und bestimmt, wie das Element auf der Seite angezeigt wird.

Verwenden Sie die Utility-Klassen table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group und table-footer-group, um Elemente zu erstellen, die sich wie ihre entsprechenden Tabellenelemente verhalten.

Float

float-*Steuert die Float-Position eines Elements und wird oft verwendet, um Text darum herum fließen zu lassen.

Hauptklassen:

Float aufheben

Die Utility-Klassen in Tailwind CSS zur Steuerung, wie ein Element Floats aufhebt, zusammen mit ihren entsprechenden CSS-Eigenschaften:

isolate

Diese Utility-Klassen ermöglichen es Entwicklern, das Stapelkontextverhalten eines Elements zu steuern und dadurch zu beeinflussen, wie das Element und seine Nachkommen an der Stapelreihenfolge teilnehmen.

Die isolate-Klasse hilft, eine isolierte Umgebung zu schaffen, in der die Stapelreihenfolge des Elements nicht von äußeren Elementen beeinflusst wird, während isolation-auto es dem Browser ermöglicht, den Stapelkontext gemäß den Standardregeln zu behandeln.

Verwenden Sie die Utility-Klassen isolate und isolation-auto, um zu steuern, ob ein Element explizit einen neuen Stapelkontext erstellen soll.

object-fit

Im Folgenden sind die Utility-Klassen aufgeführt, mit denen gesteuert wird, wie der Inhalt ersetzter Elemente skaliert wird, zusammen mit ihren entsprechenden CSS-Eigenschaften:

Verwenden Sie object-cover, um den Inhalt des Elements so zu dimensionieren, dass er seinen Container abdeckt: