Wie stellt man die Flex-Basis bei Rückenwind ein?

In diesem Artikel wird die Methode zum Festlegen der Flex-Basis in Tailwind CSS erläutert.

Wie stellt man die Flex-Basis bei Rückenwind ein?

Um die Flex-Basis in Tailwind CSS festzulegen, erstellen Sie eine HTML-Datei. Verwenden Sie dann die „ basis- ”-Hilfsprogrammklasse im HTML-Programm und geben Sie die Größe des Flex-Elements an. Dieses Dienstprogramm legt die Anfangsgröße der Flex-Elemente fest. Um die Änderungen sicherzustellen, sehen Sie sich die Webseite an.

Schauen Sie sich die angegebenen Schritte für eine praktische Demonstration an:

Schritt 1: Flex-Basis im HTML-Programm festlegen
Erstellen Sie ein HTML-Programm und nutzen Sie das „ basis- „Dienstprogrammklasse zum Festlegen der Größe des Flex-Elements. Wir haben zum Beispiel „ Basis-1/4 “, „ Basis-1/3 ', Und ' Basis-1/2 „Dienstprogramme zum Festlegen von drei Flex-Elementen:

Hier:

• „ biegen Die Klasse „“ wird verwendet, um ein flexibles Layout zu erstellen und die Größe des untergeordneten Elements basierend auf dem verfügbaren Platz anzupassen.
• „ h-20 Die Klasse „Setzt die Höhe des
  auf 20 Einheiten.
• „ Basis-1/4 Die Klasse „Setzt die Breite des inneren
  -Elements auf 25 % seines übergeordneten Elements.
• „ Basis-1/3 Die Klasse „ legt die Breite des inneren
  auf 33,33 % des übergeordneten Containers fest.
• „ Basis-1/2 Die Klasse „
  “ legt die Breite des

  auf 50 % seines übergeordneten Containers fest.
• „ bg-rot-400 Die Klasse „wendet eine rote Hintergrundfarbe auf das
  an.
• „ bg-teal-400 Die Klasse „Legt die blaugrüne Farbe auf den Hintergrund des
  fest.
• „ bg-orange-400 Die Klasse „wendet die orange Hintergrundfarbe auf das
  an.
• „ m-1 Die Klasse fügt einen Rand von 1 Einheit um jedes
  -Element hinzu.

Schritt 2: Ausgabe überprüfen
Um sicherzustellen, dass die Flex-Basis eingerichtet wurde und ordnungsgemäß funktioniert, sehen Sie sich die HTML-Webseite an:

In der obigen Ausgabe ist die Flex-Basis zu sehen, nach der sie gestaltet wurden.

Abschluss

Mit Flex Basis können Benutzer flexible Layouts erstellen, die sich an verschiedene Bildschirmgrößen und Auflösungen anpassen. Um die Flex-Basis in Tailwind CSS festzulegen, muss „ basis- Die Dienstprogrammklasse „Wird im HTML-Programm verwendet. Benutzer müssen die Größe des Flex-Elements angeben und die Änderungen durch Anzeigen der Webseite sicherstellen. In diesem Artikel wurde die Methode zum Festlegen der Flex-Basis in Tailwind CSS erläutert.