Выравнивание пространства содержимого между двумя промежутками в попутном ветре
Как вы можете видеть в приведенном ниже фрагменте кода, я попробовал все 6 методов выравнивания и выравнивания контента, элементов и свойств Tailwind, а также гибкого выравнивания между родительским элементом, но мне все еще не удалось получить желаемое «пространство между» результат так, что ArrowIcon сместится в крайний правый конец, как показано на рисунке ниже.
<span className='text-lg flex justify-between'>
<span>{title}</span>
<span>
{showPreview ? (
<KeyboardArrowUpIcon className='justify-end justify-self-end justify-items-end content-end items-end self-end' />
) : (
<KeyboardArrowDownIcon className='justify-end justify-self-end justify-items-end content-end items-end self-end' />
)}
</span>
</span>
Возможно, я просто упускаю из виду какую-то базовую проблему HTML или CSS, но я не помню, чтобы у меня возникали такие большие трудности при попытке выполнить это без Tailwind, поэтому я изначально склоняюсь к тому, чтобы предположить, что это связано с Tailwind. Кстати, это проект Next.js, и в globals.css в настоящее время применяются следующие элементы:
@tailwind base;
@tailwind components;
@tailwind utilities;
Ответы 3
Я думаю, что ваш гибкий контейнер должен быть блочным элементом, иначе он схлопнется до размеров дочерних элементов. Кроме того, стиль внутренних элементов React не будет вести себя так, как вы ожидаете, поскольку они находятся внутри содержащего диапазона, который будет корректироваться на основе гибкой параметризации родительского элемента.
Здесь я поменял контейнер на div и в принципе вроде работает. https://jsfiddle.net/bodsvqp8/
<div style = "display: flex; justify-content: space-between;">
<span>Title</span>
<span>Arrow</span>
</div>
Обновлено: в качестве альтернативы использованию блочного контейнера вы можете расширить контейнер несколькими способами: использовать gap между компонентами, использовать min-width,...
Сработало следующее (явное задание ширины родительского элемента, чтобы оно занимало все доступное пространство):
<span className='flex justify-between w-full text-xl'>
{title}
{showPreview ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</span>
Также сработало следующее:
<div className='flex justify-between w-full text-xl'>
{title}
{showPreview ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</div>
Но предложение преобразовать родительский элемент из в один не сработало.
При этом есть ли у кого-нибудь аргумент в пользу того, должно ли «семантически» это быть a или a? Моя первоначальная склонность — потому что весь контент встроен, но мне интересно услышать другие мнения.
Ваши дочерние компоненты не получают полную ширину из-за проблемы с родительским контейнером, который в данном случае является тегом диапазона, а не элементом уровня блока.