Den här artikeln kommer att förklara metoden för att förhindra att flexobjekt lindas in i Tailwind CSS.
Hur förhindrar/stoppar man flexföremål från att slås in i medvind?
Gör en HTML-fil för att stoppa flexobjekt från att slås in i Tailwind. Använd sedan verktyget 'flex-nowrap' med flex-behållaren i HTML-programmet för att förhindra att flex-objekt slås in. Kontrollera sedan ändringarna genom att titta på HTML-webbsidan.
Prova de nedan nämnda stegen för att förstå det bättre:
Steg 1: Förhindra att Flex-objekt lindas in i HTML-programmet
Gör ett HTML-program och använd ' flex-nowrap ”-verktyg med önskad flexbehållare för att förhindra att flexartiklar slås in:
< kropp >
< div klass = 'flex flex-nowrap h-40' >
< div klass = 'basis-1/4 bg-röd-500 m-1' > 1 < / div >
< div klass = 'basis-1/3 bg-gul-500 m-1' > 2 < / div >
< div klass = 'bas-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / kropp >
Här:
- ' böja ”-klassen möjliggör flexbox-layout på element och tillåter att de underordnade elementen arrangeras och justeras.
- ' flex-nowrap ” klass anger att flexobjekten inte ska lindas in på flera rader och behålla alla flexartiklar på en enda rad.
- den ' bas-1/4 ”, “ bas-1/3 ', och ' bas-1/2 ” klasser sätter det inre
s bredd till 25 %, 33,33 % respektive 50 % av deras överordnade element.
Steg 2: Verifiera utdata
Se HTML-webbsidan för att säkerställa att flexobjekten inte har lindats:
På webbsidan ovan är flexartiklarna på en enda rad och har inte slagits in.
Slutsats
För att förhindra att flexobjekt lindas in i Tailwind, använd verktyget 'flex-nowrap' med önskad flexbehållare i HTML-programmet. Detta verktyg förhindrar att flexföremålen slås in. För verifiering, se ändringarna på webbsidan. Den här artikeln har illustrerat metoden för att förhindra att flexobjekt lindas in i Tailwind CSS.