Acest articol va explica metoda de setare a bazei flexibile în Tailwind CSS.
Cum să setați baza Flex în Tailwind?
Pentru a seta baza flexibilă în Tailwind CSS, creați un fișier HTML. Apoi, utilizați „ baza-
Uitați-vă la pașii furnizați pentru o demonstrație practică:
Pasul 1: Setați Flex Basis în programul HTML
Faceți un program HTML și utilizați „ baza-
< corp >
< div clasă = „flex h-20” >
< div clasă = 'baza-1/4 bg-rosu-400 m-1' > 1 < / div >
< div clasă = 'baza-1/3 bg-teal-400 m-1' > 2 < / div >
< div clasă = 'baza-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / corp >
Aici:
- „ contracta ” este folosită pentru a crea un aspect flexibil și pentru a ajusta dimensiunile elementului copil în funcție de spațiul disponibil.
- „ h-20 ” clasa setează înălțimea la 20 de unități.
- „ baza-1/4 ” clasa setează lățimea elementului
interior la 25% din elementul părinte.- „ baza-1/3 ” clasa setează lățimea
ului interior la 33,33% din containerul părinte.- „ baza-1/2 ” clasa setează lățimea
-ului la 50% din containerul părinte.- „ bg-roșu-400 ” clasa aplică o culoare roșie de fundal la
.- „ bg-teal-400 ” clasa setează culoarea teal la fundalul
.- „ bg-orange-400 ” clasă aplică culoarea de fundal portocalie la
.- „ m-1 ” clasa adaugă o marjă de 1 unitate în jurul fiecărui element
.Pasul 2: Verificați ieșirea
Pentru a vă asigura că baza flexibilă a fost setată și funcționează corect, vizualizați pagina web HTML:
În rezultatul de mai sus, baza flexibilă poate fi văzută în funcție de care au fost stilate.
Concluzie
Flex basis permite utilizatorilor să creeze machete flexibile care se adaptează la diferite dimensiuni și rezoluții ale ecranului. Pentru a seta baza flexibilă în Tailwind CSS, „ baza-
” clasa de utilitate este folosită în programul HTML. Utilizatorii trebuie să specifice dimensiunea articolului flexibil și să asigure modificările prin vizualizarea paginii web. Acest articol a explicat metoda de setare a bazei flexibile în Tailwind CSS. - „ baza-1/4 ” clasa setează lățimea elementului