Tailwindcss 間隙在 iphone chrome 上不起作用

Question

我在 css gap 上遇到了一些問題。 為什么它在 iphone 上不起作用？

這是我的代碼

<div className="flex flex-col gap-2">

在桌面上

在 iPhone 上

Answer 1

您可以在順風Flexbox的與間距達到space-的類。

<div className="flex flex-col space-x-4">

順便一提; 在 Tailwind flexbox 上應用gap類名稱不是通用方法。 間隙大小僅適用於grid容器。

<div className="grid gap-1 grid-cols-2">

Answer 2

目前，'space-' 是替換間隙的最佳解決方法，但是您只需要為彈性間隙執行此操作，網格間隙在 iOS 上工作得非常好，因此如果您要重構，則不必在以下位置重構網格至少。