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

Question

我有一个简单的 flex div 有很多 children。我想使用 tailwindcss 每行 3 个元素。

有没有办法仅使用 tailwindcss 类来完成此操作？我尝试在 parent div 和 child 元素上使用 gap-4 w-1/3，但它增加了 children 元素的边距，打破了之后的行第二个元素：

<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>

如何在 child 元素之间添加间隙，仅在每三个元素之后换行（简而言之：我想要 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

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

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

More details here

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

Tailwind: add gap to flex without breaking row

css

flexbox

tailwind-css