1

flex-row我有一个登录页面,它使用和在图像和文本块之间交替flex-row-reverse

在此处输入图像描述

我可以通过在映射列表时翻转顺序来非常简单地实现这一点,而无需更改 div 的顺序:

idx % 2 === 0 ? 'flex-row-reverse space-x-reverse' : 'flex-row'

当我意识到在移动设备上我希望它们像这样堆叠时,问题就出现了:

在此处输入图像描述

我模拟了代码沙箱中发生的事情,如下所示:

<div
  class="flex items-center flex-col mb-10 sm:flex-row sm:space-x-10"
>
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>
<div
  class="flex items-center flex-col mb-10 sm:flex-row-reverse space-x-reverse sm:space-x-10"
>
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>

移动版本看起来和预期的一样,但更大的断点看起来好像space-x-reverse正在被识别:

在此处输入图像描述

知道如何识别反向行space-x-reverse吗?

4

1 回答 1

1

您缺少.sm:上的前缀space-x-reverse

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flex items-center flex-col mb-10 sm:flex-row sm:space-x-10">
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>
<div class="flex items-center flex-col mb-10 sm:flex-row-reverse sm:space-x-reverse sm:space-x-10">
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>

于 2021-02-01T21:29:07.480 回答