Tento článok vysvetlí spôsob nastavenia flexibilnej základne v CSS Tailwind.
Ako nastaviť základ Flex v Tailwinde?
Ak chcete nastaviť flexibilný základ v CSS Tailwind, vytvorte súbor HTML. Potom použite „ základ-
Pozrite si uvedené kroky pre praktickú ukážku:
Krok 1: Nastavte základ Flex v programe HTML
Vytvorte HTML program a použite „ základ-
< telo >
< div trieda = 'flex h-20' >
< div trieda = 'základ-1/4 bg-červená-400 m-1' > 1 < / div >
< div trieda = 'základ-1/3 bg-teal-400 m-1' > 2 < / div >
< div trieda = 'základ-1/2 bg-oranžová-400 m-1' > 3 < / div >
< / div >
< / telo >
Tu:
- “ flex ” sa používa na vytvorenie flexibilného rozloženia a prispôsobenie veľkostí podriadeného prvku na základe dostupného priestoru.
- “ h-20 ” class nastavuje výšku na 20 jednotiek.
- “ základ-1/4 ” nastaví šírku vnútorného prvku
na 25 % jeho nadradeného prvku.- “ základ-1/3 ” nastaví šírku vnútorného
na 33,33 % jeho nadradeného kontajnera.- “ základ-1/2 ” nastaví šírku prvku
na 50 % jeho nadradeného kontajnera.- “ bg-red-400 ” použije červenú farbu pozadia na
.- “ bg-teal-400 ” nastaví modrozelenú farbu na pozadie
.- “ bg-oranžová-400 ” použije oranžovú farbu pozadia na
.- “ m-1 ” trieda pridáva okraj 1 jednotky okolo každého prvku
.Krok 2: Overte výstup
Aby ste sa uistili, že flexibilný základ je nastavený a funguje správne, pozrite si webovú stránku HTML:
Vo vyššie uvedenom výstupe je možné vidieť flex-základ, podľa ktorého boli štylizované.
Záver
Flex základ umožňuje používateľom vytvárať flexibilné rozloženia, ktoré sa prispôsobujú rôznym veľkostiam obrazovky a rozlíšeniam. Ak chcete nastaviť flexibilnú základňu v CSS Tailwind, „ základ-
” sa v programe HTML používa pomocná trieda. Používatelia musia určiť veľkosť flexibilnej položky a zabezpečiť zmeny zobrazením webovej stránky. V tomto článku je vysvetlený spôsob nastavenia flexibilnej základne v CSS Tailwind. - “ základ-1/4 ” nastaví šírku vnútorného prvku