В этой статье объясняется, как предотвратить перенос гибких элементов в Tailwind CSS.
Как предотвратить/остановить перенос гибких элементов в Tailwind?
Чтобы гибкие элементы не переносились в Tailwind, создайте файл HTML. Затем используйте утилиту «flex-nowrap» с flex-контейнером в программе HTML, чтобы предотвратить перенос flex-элементов. Затем проверьте изменения, просмотрев веб-страницу в формате HTML.
Попробуйте выполнить следующие шаги, чтобы понять это лучше:
Шаг 1. Предотвратите перенос элементов Flex в HTML-программу
Создайте HTML-программу и используйте « flex-nowrap ” с нужным flex-контейнером для предотвращения переноса flex-элементов:
< тело >
< див сорт '=' 'флекс флекс-ноурап х-40' >
< див сорт '=' 'база-1/4 бг-крас-500 м-1' > 1 < / див >
< див сорт '=' 'основа-1/3 бг-желтая-500 м-1' > 2 < / див >
< див сорт '=' 'база-1/2 бг-чирок-500 м-1' > 3 < / див >
< / див >
< / тело >
Здесь:
- “ сгибаться ” включает макет flexbox на element и позволяет упорядочивать и выравнивать дочерние элементы.
- “ flex-nowrap ” указывает, что flex-элементы не должны переноситься на несколько строк и хранить все flex-элементы в одной строке.
- “ основа-1/4 », « основа-1/3 ', и ' основа-1/2 ” классы задают внутреннюю
до 25%, 33,33% и 50% от их родительских элементов соответственно.
Шаг 2: проверьте вывод
Чтобы убедиться, что гибкие элементы не были упакованы, просмотрите веб-страницу HTML:
На приведенной выше веб-странице гибкие элементы находятся в одной строке и не были обернуты.
Заключение
Чтобы предотвратить перенос гибких элементов в Tailwind, используйте утилиту «flex-nowrap» с нужным гибким контейнером в программе HTML. Эта утилита предотвращает перенос гибких элементов. Для проверки просмотрите изменения на веб-странице. В этой статье показан метод предотвращения переноса гибких элементов в Tailwind CSS.