Tailwind CSS flexbox gap 不适用于 iPhone Chrome

Posted 2023-03-07

【中文标题】Tailwind CSS flexbox gap 不适用于 iPhone Chrome

【英文标题】：Tailwind CSS flexbox gap is not working on iPhone Chrome

【发布时间】：2021-02-14 03:32:12

【问题描述】：

我遇到了 CSS flexbox gap 的一些问题。为什么它不能在 iPhone 上运行？

这是我的代码

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

在桌面上

在 iPhone 镀铬上

【问题讨论】：

您似乎已经通过显示 ios Safari 的 caniuse 信息回答了您的问题，该信息给出了“未实现”。如果您认为这不是问题的原因，您能否进一步解释一下场景是什么？

我不明白。你的意思是IOS Safari和IOS Chrome兼容吗？

iOS Safari 和 Chrome 都使用相同版本的 Webkit，只更新 iOS 的新版本。

【参考方案1】：

您可以使用 space- 类在 Tailwind flexbox 上实现间距。

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

顺便说一句；在 Tailwind flexbox 上应用 gap 类名不是通用方法。间隙大小仅适用于 grid 容器。

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

【讨论】：

你的意思是不可能？ codesandbox.io/s/tailwind-cra-forked-c6ft2?file=/src/App.js

关于 Tailwind 文档；列间距的正确方法是在 flexbox 元素上使用 space between 表示法。 Space Between - Tailwind

我在使用 Safari 时遇到了同样的问题。可以确认space between 有效。 tailwindcss.com/docs/space

至少从 Tailwind v2 开始就可以使用 flexbox 的间隙大小：v2.tailwindcss.com/docs/gap 这是低于 14.5 的 Safari 版本和仍然具有

【参考方案2】：

目前，'space-' 是替换间隙的最佳解决方法，但是您只需要对弹性间隙执行此操作，网格间隙在 iOS 上工作得非常好，因此如果您要重构，则不必重构至少你的网格。