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

Posted 2023-03-07

【中文标题】顺风：在不破坏行的情况下增加弯曲的间隙

【英文标题】：Tailwind: add gap to flex without breaking row

【发布时间】：2021-10-04 15:10:13

【问题描述】：

我有一个带有许多孩子的简单 flex div。我希望使用 tailwindcss 每行有 3 个元素。

有没有办法只使用 tailwindcss 类来完成这个？我尝试在我的父 div 和子元素上使用 gap-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）？

【参考方案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>