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