Tento článek vysvětlí způsob nastavení flexibilního základu v Tailwind CSS.
Jak nastavit Flex Base v Tailwindu?
Chcete-li nastavit flexibilní základ v CSS Tailwind, vytvořte soubor HTML. Poté použijte „ základ-
Podívejte se na uvedené kroky pro praktickou ukázku:
Krok 1: Nastavte základ Flex v programu HTML
Vytvořte HTML program a použijte „ základ-
< tělo >
< div třída = 'flex h-20' >
< div třída = 'základ-1/4 bg-červená-400 m-1' > 1 < / div >
< div třída = 'základ-1/3 bg-teal-400 m-1' > 2 < / div >
< div třída = 'základ-1/2 bg-oranžová-400 m-1' > 3 < / div >
< / div >
< / tělo >
Tady:
- “ flex ” se používá k vytvoření flexibilního rozvržení a úpravě velikostí podřízeného prvku na základě dostupného prostoru.
- “ h-20 ” class nastaví výšku na 20 jednotek.
- “ základ-1/4 ” nastaví šířku vnitřního prvku
na 25 % jeho nadřazeného prvku.- “ základ-1/3 ” nastaví šířku vnitřního
na 33,33 % jeho nadřazeného kontejneru.- “ základ-1/2 ” nastaví šířku prvku
na 50 % jeho nadřazeného kontejneru.- “ bg-red-400 Třída ” aplikuje červenou barvu pozadí na
.- “ bg-teal-400 ” nastaví modrozelenou barvu na pozadí
.- “ bg-oranžová-400 Třída ” aplikuje oranžovou barvu pozadí na
.- “ m-1 ” přidá kolem každého prvku
okraj 1 jednotky.Krok 2: Ověřte výstup
Abyste se ujistili, že je flex-base nastavena a funguje správně, prohlédněte si webovou stránku HTML:
Na výše uvedeném výstupu je vidět flex-základ, podle kterého byly stylizovány.
Závěr
Flex základ umožňuje uživatelům vytvářet flexibilní rozvržení, která se přizpůsobí různým velikostem obrazovky a rozlišení. Chcete-li nastavit flexibilní základ v Tailwind CSS, „ základ-
” třída utility se používá v programu HTML. Uživatelé musí určit velikost flexibilní položky a zajistit změny zobrazením webové stránky. Tento článek vysvětluje metodu nastavení flexibilního základu v Tailwind CSS. - “ základ-1/4 ” nastaví šířku vnitřního prvku