Denne oppskriften vil eksemplifisere metoden for å forhindre at flex-elementer vokser eller krymper i Tailwind CSS.
Hvordan forhindre at Flex-elementer vokser eller krymper i medvind?
For å forhindre at flex-elementene vokser og krymper i Tailwind, lag HTML-filen. Deretter bruker du ' flex-grow-0 ' og ' flex-shrink-0 ”-verktøy med de spesifikke flex-elementene i HTML-programmet. Disse verktøyene tillater ikke flex-elementer å vokse eller krympe i henhold til plassen i flex-beholderen. Deretter justerer du skjermstørrelsen på HTML-nettsiden for å sikre endringer.
Følg de angitte trinnene for praktisk implementering:
Trinn 1: Hindre at Flex-elementer vokser og krymper i HTML-programmet
Lag et HTML-program og bruk ' flex-grow-0 ' og ' flex-shrink-0 ” verktøy med de ønskede fleksible elementene for å forhindre at de vokser eller krymper:
< kropp >
< div klasse = 'flex h-20' >
< div klasse = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div klasse = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klasse = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div klasse = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / kropp >
Her:
- ' flex-grow-0 Klasse forhindrer at flex-elementet vokser og tar ekstra plass i flex-beholderen når det er ledig plass.
- ' flex-shrink-0 Klasse forhindrer at flex-elementet krymper og reduseres i flex-beholderen når plassen er utilstrekkelig.
- ' flex-vokse ”-klassen lar flex-elementet vokse og okkupere den tilgjengelige plassen i flex-beholderen.
- ' flex-krympe ”-klassen lar flex-elementet krympe hvis det ikke er nok plass i flex-beholderen.
Trinn 2: Bekreft utdata
Se HTML-nettsiden og endre skjermstørrelsen for å sikre at de ønskede flekselementene har blitt forhindret fra å vokse og krympe:
Ovennevnte utdata viser at flexelementet '2' ikke krymper på utilstrekkelig plass, og elementet '1' vokser ikke i tilgjengelig plass. Dette indikerer at de ønskede flex-elementene har blitt forhindret fra å vokse og krympe.
Konklusjon
For å forhindre at flex-elementene vokser og krymper i Tailwind, bruk ' flex-grow-0 ' og ' flex-shrink-0 ”-verktøy med de ønskede flex-elementene i HTML-programmet. For verifisering, endre og se skjermstørrelsen på HTML-nettsiden. Denne oppskriften har eksemplifisert metoden for å forhindre at flex-elementer vokser eller krymper i Tailwind CSS.