В этой статье будет показан метод предотвращения увеличения или уменьшения гибких элементов в Tailwind CSS.
Как предотвратить рост или уменьшение гибких элементов в Tailwind?
Чтобы гибкие элементы не увеличивались и не уменьшались в Tailwind, создайте файл HTML. Затем используйте « flex-grow-0 ' и ' flex-shrink-0 Утилиты с определенными гибкими элементами в программе HTML. Эти утилиты не позволяют гибким элементам увеличиваться или уменьшаться в зависимости от пространства внутри гибкого контейнера. После этого отрегулируйте размер экрана веб-страницы HTML, чтобы обеспечить изменения.
Следуйте предоставленным шагам для его практической реализации:
Шаг 1. Предотвратите увеличение и уменьшение элементов Flex в программе HTML
Создайте HTML-программу и используйте « flex-grow-0 ' и ' flex-shrink-0 Утилиты с нужными flex-элементами, чтобы предотвратить их рост или сжатие:
< тело >
< див сорт '=' 'флекс х-20' >
< див сорт '=' 'flex-grow-0 bg-желтый-500 w-40 м-1' > 1 < / див >
< див сорт '=' 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / див >
< див сорт '=' 'flex-grow bg-teal-500 w-40 м-1' > 3 < / див >
< див сорт '=' 'флекс-термоусадка бг-ред-500в-40м-1' > 4 < / див >
< / див >
< / тело >
Здесь:
- “ flex-grow-0 ” не позволяет гибкому элементу увеличиваться и занимать дополнительное место внутри гибкого контейнера, когда место доступно.
- “ flex-shrink-0 ” предотвращает сжатие и уменьшение flex-элемента внутри flex-контейнера, когда места недостаточно.
- “ гибкий рост » позволяет гибкому элементу увеличиваться и занимать доступное пространство внутри гибкого контейнера.
- “ гибкая усадка » позволяет гибкому элементу сжиматься, если во гибком контейнере недостаточно места.
Шаг 2: проверьте вывод
Просмотрите веб-страницу HTML и измените размер экрана, чтобы убедиться, что желаемые гибкие элементы не увеличиваются и не уменьшаются:
Приведенный выше вывод показывает, что гибкий элемент «2» не сжимается при недостатке места, а элемент «1» не увеличивается в доступном пространстве. Это указывает на то, что желаемые гибкие элементы не могут увеличиваться и уменьшаться.
Заключение
Чтобы предотвратить рост и сжатие гибких элементов в Tailwind, используйте « flex-grow-0 ' и ' flex-shrink-0 утилиты с нужными flex-элементами в программе HTML. Для проверки измените и просмотрите размер экрана веб-страницы HTML. Эта статья иллюстрирует метод предотвращения увеличения или уменьшения гибких элементов в Tailwind CSS.