顺风:在不破坏行的情况下增加弯曲的间隙
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中的内容?