Šajā rakstā ir izskaidrota metode elastīguma iestatīšanai Tailwind CSS.
Kā iestatīt elastīgo pamatu aizmugurējā vējā?
Lai iestatītu elastīgo bāzi programmā Tailwind CSS, izveidojiet HTML failu. Pēc tam izmantojiet ' pamats-
Apskatiet sniegtos soļus praktiskajai demonstrācijai:
1. darbība: HTML programmā iestatiet Flex Basis
Izveidojiet HTML programmu un izmantojiet ' pamats-
< ķermeni >
< div klasē = 'flex h-20' >
< div klasē = 'bāze-1/4 bg-red-400 m-1' > 1 < / div >
< div klasē = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div klasē = 'basis-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / ķermeni >
Šeit:
- ' flex ” klase tiek izmantota, lai izveidotu elastīgu izkārtojumu un pielāgotu pakārtotā elementa izmērus, pamatojoties uz pieejamo vietu.
- ' h-20 ” klase iestata augstumu uz 20 vienībām.
- ' bāze-1/4 ” klase iestata iekšējā
elementa platumu uz 25% no tā vecākelementa.- ' bāze-1/3 ” klase iestata iekšējā
platumu uz 33,33% no vecākkonteinera.- ' bāze-1/2 ” klase iestata
platumu uz 50% no vecākkonteinera.- ' bg-red-400 ” klase lieto
sarkanu fona krāsu.- ' bg-teal-400 ” klase iestata zilganzaļo krāsu uz
fona.- ' bg-orange-400 ” klase lieto
oranžo fona krāsu.- ' m-1 ” klase pievieno 1 vienības rezervi ap katru
elementu.2. darbība: pārbaudiet izvadi
Lai pārliecinātos, ka elastīgā bāze ir iestatīta un darbojas pareizi, skatiet HTML tīmekļa lapu:
Iepriekš minētajā izvadā var redzēt elastīgo pamatu, saskaņā ar kuru tie tika veidoti.
Secinājums
Flex bāze ļauj lietotājiem izveidot elastīgus izkārtojumus, kas pielāgojas dažādiem ekrāna izmēriem un izšķirtspējai. Lai iestatītu elastīgo bāzi programmā Tailwind CSS, “ pamats-
” utilīta klase tiek izmantota HTML programmā. Lietotājiem ir jānorāda elastīgā vienuma izmērs un jānodrošina izmaiņas, apskatot tīmekļa lapu. Šajā rakstā ir izskaidrota metode elastīguma iestatīšanai Tailwind CSS. - ' bāze-1/4 ” klase iestata iekšējā