Това описание ще илюстрира метода за предотвратяване на нарастването или свиването на flex елементи в Tailwind CSS.
Как да предотвратите растежа или свиването на гъвкавите елементи при попътен вятър?
За да предотвратите нарастването и свиването на гъвкавите елементи в Tailwind, направете HTML файла. След това използвайте „ flex-grow-0 ' и ' flex-shrink-0 ” помощни програми със специфичните flex елементи в HTML програмата. Тези помощни програми не позволяват на гъвкавите елементи да растат или да се свиват според пространството във гъвкавия контейнер. След това коригирайте размера на екрана на HTML уеб страницата, за да осигурите промени.
Следвайте предоставените стъпки за практическото му прилагане:
Стъпка 1: Предотвратете нарастването и свиването на Flex елементи в HTML програма
Направете HTML програма и използвайте „ flex-grow-0 ' и ' flex-shrink-0 ” помощни програми с желаните гъвкави елементи, за да предотвратите тяхното нарастване или свиване:
< тяло >
< див клас = 'flex h-20' >
< див клас = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / див >
< див клас = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / див >
< див клас = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / див >
< див клас = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / див >
< / див >
< / тяло >
Тук:
- “ flex-grow-0 ” клас не позволява на flex елемента да расте и да заема допълнително място в контейнера flex, когато има налично място.
- “ flex-shrink-0 ” клас предотвратява свиването и намаляването на гъвкавия елемент в рамките на гъвкавия контейнер, когато мястото е недостатъчно.
- “ flex-grow ” клас позволява на flex елемента да расте и да заема наличното пространство в рамките на flex контейнера.
- “ flex-shrink ” клас позволява на гъвкавия елемент да се свие, ако няма достатъчно място в контейнера за гъвкавост.
Стъпка 2: Проверете изхода
Прегледайте HTML уеб страницата и променете размера на екрана, за да сте сигурни, че желаните гъвкави елементи са предотвратени от нарастване и свиване:
Горният резултат показва, че гъвкавият елемент „2“ не се свива при недостатъчно пространство, а елементът „1“ не нараства в наличното пространство. Това показва, че желаните гъвкави елементи са били предотвратени от нарастване и свиване.
Заключение
За да предотвратите нарастването и свиването на гъвкавите елементи в Tailwind, използвайте „ flex-grow-0 ' и ' flex-shrink-0 ” помощни програми с желаните flex елементи в HTML програмата. За проверка променете и прегледайте размера на екрана на HTML уеб страницата. Това описание е илюстрирало метода за предотвратяване на нарастването или свиването на flex елементи в Tailwind CSS.