css 如何去除柔性 Package 上柔性物品之间的空间：换行[复制]

taor4pac 于 2023-01-14 发布在其他

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

- 此问题在此处已有答案**：

<div class="flex flex-wrap items-baseline">
      <div class="h-10 basis-1/2 border bg-orange-500">hello1</div>
      <div class="h-40 basis-1/2 border bg-amber-700">hello4</div>
      <div class="h-20 basis-1/2 border bg-yellow-500">hello2</div>
      <div class="h-30 basis-1/2 border bg-green-800">hello3</div>
    </div>

问题预览图像：https://i.ibb.co/SK6zPCv/image.png
代码：https://play.tailwindcss.com/AI0Uo1vVsT

css

来源：https://stackoverflow.com/questions/75078436/how-to-remove-space-between-flex-item-on-flex-wrap-wrap

3条答案

按热度按时间

t98cgbkg1#

你可以使用grid来更好的控制你的布局，或者你可以添加自定义css，比如：

.h-20{
  position: relative;
  top:-7.5rem;
}

赞(0）回复(0）举报 2023-01-14

qxgroojn2#

要同时在行和列中排列元素，必须使用网格，因为根据flex的定义，它只能用于在一个维度上排列元素，但通过使用网格，这个问题可以很容易地解决。
example

赞(0）回复(0）举报 2023-01-14

kuhbmx9i3#

我想你会想使用@Suhail建议的网格。它提供了更多的控制方式。但这一切都取决于这些div/box本质上是动态的还是都是固定大小的。请务必查看https://css-tricks.com/snippets/css/complete-guide-grid/以获得更多信息。这可以使用tailwindcss和它们的网格类来配置。
关于Flexbox的另一个很好的资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何去除柔性 Package 上柔性物品之间的空间：换行[复制]

3条答案

相关问题

热门标签

最新问答