tailwindcss flex 对齐项目和空间

Question

拜托，我对tailwindCSS有疑问。 我正在尝试制作投票按钮（like 和 disklike）。 我将 flex 用于按钮和section footer中的标签。

拜托，你能帮我如何将投票的文本对齐到右边吗？

以及如何对齐footer标签中的文本？

这是我的代码（在此代码下方，您可以找到指向操场的链接）

<main class="h-screen bg-gradient-to-b from-red-700 to-pink-200">
  <div class="p-5">
    <article class="max-w-xs mx-auto bg-white rounded-2xl shadow-md overflow-hidden">
      <figure>
        <img class="object-scale-down w-96" src="https://images.pexels.com/photos/5276584/pexels-photo-5276584.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200" alt="Man looking at item at a store" />
      </figure>
      <article>
        <section class="flex text-2xl font-bold text-white p-2">
          <div class="flex-1 text-left bg-green-100 text-black rounded-xl mx-1 px-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
            </svg>
            20
          </div>
          <div class="flex-1 bg-red-500 rounded-xl mx-3 px-1 align-middle justify-end">
            48
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
            </svg>
          </div>
        </section>
        <section class="m-2">
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline uppercase text-center">Discover beauty of horses</a>
          <p class="text-gray-500">Riding on horses is not easy as you can see that. Try this long way in horseback ride and you can see nature from most beauty height. You see every detail on the ground or look to the mounts far away from you.</p>
          <footer class="flex h-8">
            <span class="flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 rounded-2xl mx-2">Short way</span>
            <span class="flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 rounded-2xl mx-2">Medium</span>
            <span class="flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 rounded-2xl mx-2">Long way</span>
          </footer>
        </section>
      </article>
    </article>
  </div>
</main>

您在此处看到的完整代码： https://play.tailwindcss.com/I5DrixGeka

感谢您的任何建议

PS：我刚开始使用tailwindCSS。 再次感谢

Answer 1

要将投票内容向右对齐，只需添加 class text-right 。

对于页脚，只需要使用flex items-center即可。 并添加适当的间距space-x-# 。 在按钮上添加一些填充以及px-3 py-1

检查工作示例。

<footer class="flex items-center h-8 space-x-2">
  <span class="flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 py-1 rounded-2xl">Short way</span>
  <span class="flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 py-1 rounded-2xl">Medium</span>
  <span class="flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 py-1 rounded-2xl">Long way</span>
</footer>

Answer 2

我认为您应该重新考虑在这种情况下如何使用。

您正在将flex添加到保存按钮信息的两个divs的包装元素中。 当真的，你应该添加flex到两个divs 。 像这样：

<section>
  <div class="flex items-center justify-around">
    <!-- thumbs up -->
  </div>
  <div class="flex items-center justify-around">
    <!-- thumbs down -->
  </div>
</section>

这将使这个flex div中的内容居中，并以均匀around间距将它们隔开。

然后接下来是考虑在section包装器上使用grid或flex 。 我个人喜欢在这样的时刻使用网格，但 flex 也一样好，这一切都在行动。 加上我自己的额外 styles。

https://play.tailwindcss.com/ecOu6LHF6s