Wie verwende ich „content-stretch“ in Tailwind?

In Tailwind CSS steuern die „align-content“-Dienstprogramme die Positionierung von Zeilen in mehrzeiligen Flex- und Grid-Containern. Die „Inhalts-Stretch”-Klasse wendet die CSS-Eigenschaft „align-content: stretch“ auf die Rasterelemente an. Diese Eigenschaft ermöglicht es Rasterelementen, den verfügbaren Platz entlang der Querachse des Rasters oder Flex-Containers einzunehmen.

In diesem Artikel wird die Verwendung des Dienstprogramms „content-stretch“ in Tailwind CSS erläutert.

Wie verwende ich „content-stretch“ in Tailwind?

Um „content-stretch“ in Tailwind zu verwenden, erstellen Sie die HTML-Datei. Fügen Sie dann das Dienstprogramm „content-stretch“ mit dem jeweiligen Rastercontainer im HTML-Programm hinzu. Mit diesem Dienstprogramm können Rasterelemente den verfügbaren Platz entlang der Querachse des Containers einnehmen. Überprüfen Sie abschließend die Änderungen auf der Webseite.

Schauen Sie sich die unten aufgeführten Schritte zur praktischen Umsetzung an.

Schritt 1: Verwenden Sie das Dienstprogramm „content-stretch“ im HTML-Programm

Erstellen Sie ein HTML-Programm und verwenden Sie das Dienstprogramm „content-stretch“ mit dem gewünschten Rastercontainer, damit dessen Elemente den verfügbaren Platz entlang seiner Querachse einnehmen können:

<Körper>

<div Klasse = „h-56 Rasterinhalt-Stretch Rasterspalten-3 Lücke-4 Textmitte bg-teal-700″>

<div Klasse=“bg-yellow-500 p-3″>1div>

<div Klasse=“bg-yellow-500 p-3″>2div>

<div Klasse=“bg-yellow-500 p-3″>3div>

<div Klasse=“bg-yellow-500 p-3″>4div>

div>

Körper>

Hier im übergeordneten

-Element:

  • h-56“ wird verwendet, um die Höhe des
    -Containers auf 56 Einheiten einzustellen.
  • Netz“-Klasse erstellt ein Rasterlayout.
  • Inhalts-Stretch“-Klasse streckt die Rasterelemente entlang der Querachse des Containers.
  • Gitterspalten-3“-Klasse setzt die Spaltenanzahl im Raster auf 3.
  • Lücke-4“-Klasse legt einen Abstand von 4 Einheiten zwischen jedem Rasterelement fest.
  • Text-Mitte“-Klasse richtet den Text innerhalb jedes Rasterelements zentriert aus.
  • bg-teal-700“-Klasse legt die Hintergrundfarbe des Rastercontainers auf Blaugrün fest.

In den untergeordneten

-Elementen:

  • bg-gelb-500“-Klasse wendet die gelbe Farbe auf den Hintergrund der Rasterelemente an.
  • S. 3“-Klasse fügt dem Inhalt innerhalb der untergeordneten
    -Elemente 3 Einheiten Polsterung hinzu.

Schritt 2: Ausgabe überprüfen

Um zu überprüfen, ob das Dienstprogramm „Content-Stretch“ angewendet wurde oder nicht, sehen Sie sich die HTML-Webseite an:

In der obigen Ausgabe ist zu sehen, dass die Rasterelemente den verfügbaren Platz entlang der Querachse des Containers eingenommen haben. Dies zeigt an, dass das Dienstprogramm „content-stretch“ erfolgreich angewendet wurde.

Abschluss

Um „content-stretch“ in Tailwind zu verwenden, fügen Sie das Dienstprogramm „content-stretch“ mit dem gewünschten Rastercontainer im HTML-Programm hinzu, um den verfügbaren Platz entlang seiner Querachse auszufüllen. Navigieren Sie zur Überprüfung zur Webseite und sehen Sie sich die Änderungen darauf an. In diesem Artikel wird die Methode zur Verwendung des Dienstprogramms „content-stretch“ in Tailwind CSS erläutert.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen