alignment - 如何将导航栏项目与顺风中的右角对齐

Question

<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

需要做出哪些改变？

Answer 1

要将项目向右对齐，您需要在 Flex 容器内使用 justify-end 将 Flex 项目对齐到末尾。

您还可以通过将 flex-row 更改为 flex-row-reverse 将导航栏项目与右侧对齐。这样，您就可以获得项目顺序的两种变体。

代码:

<div class="flex md:flex md:flex-grow flex-row justify-end space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

<!-- or -->

<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

顺风游戏: justify-end , flex-row-reverse .