tailwindcss flex 对齐项目和之间的空间

Posted 2023-03-07

【中文标题】tailwindcss flex 对齐项目和之间的空间

【英文标题】：tailwindcss flex align items and space between

【发布时间】：2021-07-05 20:27:32

【问题描述】：

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

请问，您能帮我如何将投票的文本向右对齐吗？

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

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

<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"  />
      </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 开始。再次感谢

【参考方案1】：

要将反对票内容右对齐，只需添加类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>

【参考方案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 也一样好！这一切都在行动，我自己的额外风格。

https://play.tailwindcss.com/ecOu6LHF6s