css 顺风：增加差距，以弯曲，而不打破行

pftdvrlh 于 2023-04-13 发布在其他

关注(0)|答案(3)|浏览(101)

我有一个简单的flex div，里面有很多子元素。我想用tailwindcss在每一行添加3个元素。
有没有一种方法可以只用tailwindcss类来完成这个任务呢？我尝试在父div上使用gap-4，在子元素上使用w-1/3，但是它给子元素增加了margin，在第二个元素之后断开了行：

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

css

来源：https://stackoverflow.com/questions/68567805/tailwind-add-gap-to-flex-without-breaking-row

3条答案

按热度按时间

gupuwyp21#

这是网格作业

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

赞(0）回复(0）举报 2023-04-13

xienkqul2#

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

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

More details here

赞(0）回复(0）举报 2023-04-13

yduiuuwa3#

您可以自定义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>

赞(0）回复(0）举报 2023-04-13

我来回答

css 顺风：增加差距，以弯曲，而不打破行

3条答案

相关问题

热门标签

最新问答