tailwindcss flex align items and space between

Question

拜托，我有一个关于 tailwindCSS 的问题。我正在尝试制作投票按钮（像和磁盘一样）。我在 section 的 footer 中为按钮和标签使用 flex。

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

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

这是我的代码（在这段代码下面你可以找到 link 游乐场）

<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

检查working example。

<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 & space 中的内容居中，所有 around.

的间距均匀

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

https://play.tailwindcss.com/ecOu6LHF6s

tailwindcss flex align items and space between

tailwindcss flex align items and space between

html

css

vertical-alignment

flexbox

tailwind-css