Com establir la base flexible a Tailwind?

Aquest article explicarà el mètode per establir la base flexible a Tailwind CSS.

Com establir la base flexible a Tailwind?

Per establir la base flexible a Tailwind CSS, feu un fitxer HTML. A continuació, utilitzeu el ' base- ” classe d'utilitat al programa HTML i especifiqueu la mida de l'element flexible. Aquesta utilitat estableix la mida inicial dels elements flexibles. Per garantir els canvis, consulteu la pàgina web.

Mireu els passos proporcionats per a una demostració pràctica:

Pas 1: establiu Flex Basis al programa HTML
Feu un programa HTML i utilitzeu el ' base- ” classe d'utilitat per definir la mida de l'element flexible. Per exemple, hem utilitzat ' base-1/4 ”, “ base-1/3 ”, i “ base-1/2 ” utilitats per configurar tres elements flexibles:

Aquí:

• “ flexionar La classe s'utilitza per crear un disseny flexible i ajustar les mides de l'element secundari en funció de l'espai disponible.
• “ h-20 ” class estableix l'alçada del
  en 20 unitats.
• “ base-1/4 La classe estableix l'amplada de l'element
  interior al 25% del seu element pare.
• “ base-1/3 ” classe estableix l'amplada del
  interior al 33,33% del seu contenidor principal.
• “ base-1/2 ” estableix l'amplada del
  al 50% del seu contenidor principal.
• “ bg-vermell-400 ” la classe aplica un color de fons vermell al
  .
• “ bg-teal-400 ” La classe estableix el color verd verde al fons del
  .
• “ bg-taronja-400 ” la classe aplica el color de fons taronja al
  .
• “ m-1 ” La classe afegeix un marge d'1 unitat al voltant de cada element
  .

Pas 2: verifiqueu la sortida
Per assegurar-vos que la base flexible s'ha configurat i funciona correctament, consulteu la pàgina web HTML:

A la sortida anterior, es pot veure la base flexible segons la qual es van dissenyar.

Conclusió

Flex base permet als usuaris crear dissenys flexibles que s'ajusten a diferents mides i resolucions de pantalla. Per establir la base flexible a Tailwind CSS, el ' base- ” La classe d'utilitat s'utilitza al programa HTML. Els usuaris han d'especificar la mida de l'element flexible i assegurar-se els canvis visualitzant la pàgina web. Aquest article ha explicat el mètode per establir la base flexible a Tailwind CSS.