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

Posted

技术标签:

【中文标题】顺风:在不破坏行的情况下增加弯曲的间隙【英文标题】: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>

【讨论】:

以上是关于顺风:在不破坏行的情况下增加弯曲的间隙的主要内容,如果未能解决你的问题,请参考以下文章

如何在不破坏文本换行的情况下保存和格式化wpf UserControl中的内容?

Android 啥时候会在不破坏整个进程的情况下破坏活动?

在不破坏保留元素的情况下更改向量的大小

在不破坏管道的情况下与进程多次通信?

如何在不破坏 Subversion 历史的情况下重命名 Java 包?

我如何(url)在不破坏 mime 的情况下重写?