Tailwind CSS flexbox gap не работает на iPhone Chrome

#css #tailwind-css

Вопрос:

Я столкнулся с некоторой проблемой с CSS flexbox gap. Почему он не работает на iPhone?

Вот мой код

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

на рабочем столе

на iphone Chrome

1. Похоже, вы ответили на свой вопрос, показав информацию о caniuse для IOS Safari, которая выдает «не реализовано». Не могли бы вы немного подробнее объяснить, в чем заключается сценарий, если вы считаете, что это не причина проблемы?

2. Я этого не понимаю. Вы имеете в виду, что IOS Safari и IOS Chrome имеют одинаковую совместимость?

3. iOS Safari и Chrome используют одну и ту же версию Webkit, которая обновляется только с новыми версиями iOS.

Ответ №1:

Вы можете добиться интервала в Tailwind flexbox с space- помощью классов.

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

Кстати; применение gap имен классов к Tailwind flexbox не является универсальным методом. Определение размера зазора работает только с grid контейнерами.

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

1. Что значит невозможно? codesandbox.io/s/tailwind-cra-forked-c6ft2?file=/src/App.js

2. Что касается документации Tailwind; правильный способ разделения столбцов — использовать space between обозначения для элементов flexbox. Пробел между — Tailwind

3. У меня была такая же проблема с Safari. Могу подтвердить, что space between это работает. tailwindcss.com/docs/space

4. Настройка размеров Gap для flexbox доступна по крайней мере с версии Tailwind v2: v2.tailwindcss.com/docs/gap Это проблема с версиями Safari ниже 14.5 и любым браузером на iOS, который все еще имеет <14.5 (все они используют одну и ту же установленную версию Webkit).

Ответ №2:

В настоящее время ‘space-‘ — лучший обходной путь для замены пробелов, однако вам нужно сделать это только для ваших гибких пробелов, пробелы в сетке отлично работают на iOS, поэтому, если вы собираетесь реорганизовать, вам не нужно, по крайней мере, реорганизовывать свои сетки.