Tailwind CSS flex布局问题：如何将Text2对齐到容器最右侧

问题现象 #

需要将Text2文本放置在所在容器的最右侧，当前Text1位置符合预期，但代码运行后Text2紧邻Text1显示，未实现靠右布局效果，原始代码如下：

<div className="w-screen h-screen flex">
    ...
    <div className="flex-1 h-full flex flex-col">
        ...
        <div className="flex-1 flex flex-col bg-primary-500/5 dark:bg-red-400 overflow-y-auto">
            ...
            <div className="shrink-0 h-10 text-sm text-gray-700 bg-white dark:bg-slate-900 px-5 flex items-center">
                Text1
                <div className='flex-1'>
                    Text2
                </div>
            </div>
        </div>
    </div>
</div>

问题原因 #

包裹Text2的div设置了flex-1类，这个类的作用是让元素占满父flex容器的剩余横向宽度，但flex子项默认内容左对齐，因此Text2只会显示在这个占满剩余宽度的div的左边缘，视觉上紧贴在Text1旁边，不会跑到容器最右侧。

修复方案 #

根据使用场景二选一即可：

• 纯文本场景：给包裹Text2的div追加text-right类，让div内部文本靠右对齐，类名修改为className='flex-1 text-right'
• 复杂内容场景（Text2位置是按钮、图标等自定义组件）：给包裹Text2的div追加flex布局+右对齐类，类名修改为className='flex-1 flex justify-end items-center'，可以保证任意类型的子内容都能靠右且保持垂直居中对齐
  修改后对应核心代码片段：

<div className="shrink-0 h-10 text-sm text-gray-700 bg-white dark:bg-slate-900 px-5 flex items-center">
    Text1
    <div className='flex-1 text-right'>
        Text2
    </div>
</div>

内容的提问来源于stack exchange，提问作者ZPaulB