默认情况下,ul 有一个 justify-start flexbox 属性。当为小屏幕应用响应式设计时:它将是justify-center,对于中屏幕:justify-around 对于大屏幕:均匀对齐。 但是,对于所有屏幕尺寸,它仅显示 justify-evenly 属性,它会覆盖所有其他 justify-property。 如何为不同的屏幕应用不同的 justify-property?
<nav className='py-8'>
<ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse justify-center md:flex-row justify-around lg:flex-row-reverse justify-evenly'>
<Link href='#'>
<a className='p-2 text-2xl font-bold transition duration-500 hover:bg-indigo-300'> Beginnings</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Now</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Tech</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Talks</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Connect</a>
</Link>
</ul>
</nav>
最佳答案
您添加了通用的 justify-around
和 justify-evenly
类,而不是屏幕尺寸前缀的 md:justify-around
和 lg:均匀对齐
。在 Tailwind 中,无前缀的类适用于所有屏幕尺寸。带前缀的类适用于所有大于或等于给定前缀的屏幕尺寸。
<ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse justify-center md:flex-row md:justify-around lg:flex-row-reverse lg:justify-evenly'>
关于html - Tailwind 响应式 Flexbox 属性未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65454188/