Tailwind：在不破坏行的情况下增加弯曲间隙

Question

我有一个简单的弹性 div 有很多孩子。我想要使​​用 tailwindcss 每行 3 个元素。

有没有办法仅使用 tailwindcss 类来完成此任务？我尝试在父级 div 上使用间隙-4，并在子元素上使用 w-1/3，但它为子元素添加了边距，从而破坏了第二个元素之后的行：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-wrap gap-4  mb-6">
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
    </div>

如何在子元素之间添加间隙，仅在每三个元素之后断行（简而言之：我想要一个 3 列 div）？

Answer 1

这是一个网格作业

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="grid-cols-3 grid gap-4  mb-6">
        <div class="shadow border rounded p-4">
            My element
        </div>
        <div class="shadow border rounded p-4">
            My element
        </div>
        <div class="shadow border rounded p-4">
            My element
        </div>
        <div class="shadow border rounded p-4">
            My element
        </div>
    </div>

Answer 2

您可以自定义 Tailwind CSS 并添加新的类来计算包括间隙在内的基础。

https://tailwindcss.com/docs/flex-basis#using-custom-values

  theme: {
    extend: {
      flexBasis: {
        "1/3-gap-4": "calc(33.3% - (2/3 * 1rem))"
      }
    },
  },

并应用它

<div class="flex flex-wrap gap-4">
        <div class="basis-1/3-gap-4">
            My element
        </div>
        <div class="basis-1/3-gap-4">
            My element
        </div>
        <div class="basis-1/3-gap-4">
            My element
        </div>
        <div class="basis-1/3-gap-4">
            My element
        </div>
</div>

Answer 3

space-x-{amount}如果您想继续使用flex而不是使用实用程序之间的空格，您也可以使用实用程序之间的空格grid：

<div class="flex flex-wrap space-x-0 md:flex-nowrap md:space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

更多详情请点击此处

我已经更新了这个答案以使用弹性盒。关键是添加了 flex-wrap 和 flex-nowrap 的断点。