See artikkel selgitab Tailwind CSS-i paindlikkuse aluse määramise meetodit.
Kuidas Tailwindis Flex Basis'i seada?
Paindliku aluse määramiseks Tailwind CSS-is looge HTML-fail. Seejärel kasutage ' alus-
Vaadake praktilise demonstratsiooni etteantud samme:
1. samm: määrake HTML-programmis Flex Basis
Looge HTML-programm ja kasutage ' alus-
< keha >
< div klass = 'flex h-20' >
< div klass = 'basis-1/4 bg-red-400 m-1' > 1 < / div >
< div klass = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div klass = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / keha >
Siin:
- “ painduv ” klassi kasutatakse paindliku paigutuse loomiseks ja alamelemendi suuruste kohandamiseks olemasoleva ruumi alusel.
- “ h-20 ” klass määrab kõrguseks 20 ühikut.
- “ alus-1/4 ” klass määrab sisemise
elemendi laiuseks 25% selle emaelemendist.- “ alus-1/3 ” klass määrab sisemise
laiuseks 33,33% selle emakonteinerist.- “ alus-1/2 ” klass määrab
laiuseks 50% selle emakonteinerist.- “ bg-red-400 ” klass rakendab
-le punase taustavärvi.- “ bg-teal-400 ” klass määrab sinakaspruuni värvi
taustale.- “ bg-orange-400 ” klass rakendab
-le oranži taustavärvi.- “ m-1 ” klass lisab iga
elemendi ümber 1 ühiku suuruse veerise.2. samm: kontrollige väljundit
Veendumaks, et paindlik alus on seadistatud ja töötab korralikult, vaadake HTML-i veebilehte:
Ülaltoodud väljundis on näha flex-basas, mille järgi need olid kujundatud.
Järeldus
Flex basic võimaldab kasutajatel luua paindlikke paigutusi, mis kohanduvad erinevate ekraanisuuruste ja eraldusvõimetega. Tailwind CSS-is paindliku aluse määramiseks alus-
” utiliidiklassi kasutatakse HTML programmis. Kasutajad peavad määrama paindliku üksuse suuruse ja tagama muudatused veebilehte vaadates. Selles artiklis on selgitatud Tailwind CSS-i paindlikkuse aluse määramise meetodit. - “ alus-1/4 ” klass määrab sisemise