用于移动屏幕的 mx-auto 否则为正常 flex

如何解决用于移动屏幕的 mx-auto 否则为正常 flex

各位，

拜托，我正在试用 TailwindCSS v2.1。看起来不错，但我在文档中找不到这个问题。

请问，我如何在 flex 中为移动设备的 center 对象执行 mx-auto（当 2 张图片不能在旁边时），否则我想要正常行为。是的，我可以从

更改每张卡片中的主要div

<div class="mt-5 px-2 md:px-5">

到

<div class="mt-5 px-2 md:px-5 mx-auto">

并且可以，但是当我有更大的屏幕时，最后一张卡片也居中（奇数卡片，最后一张总是居中）。但我只想要在所有卡片都小于一秒的情况下居中。

一张我的卡：

<!-- First card -->
<div class="mt-5 px-2 md:px-5">
    <div class="max-w-xxs rounded-2xl shadow-md overflow-hidden bg-red-700 text-white">
    <figure>
        <img class="object-scale-down w-96" src="https://zrebec.sk/assets/tt1.jpg" alt="Man looking at item at a store" />
    </figure>
    <header class="flex m-2 justify-items-start font-semibold">
        <div class="inline-flex items-center border-2 border-black w-20 rounded-md mr-2 px-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
        </svg>
        <span>186</span>
        </div>
        <div class="inline-flex items-center border-2 border-black w-20 rounded-md px-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
        </svg>
        <span>12</span>
        </div>
        <div class="flex-auto font-bold w-100 text-right">84%</div>
    </header>
    <article class="m-2">
        <h2><a href="#" class="block mt-3 text-lg font-medium hover:underline uppercase text-center">Gold Retro</a></h2>
        <p class="text-gray-300 my-2">The Compact Cassette or Musicassette (MC),also commonly called the tape cassette,cassette tape,audio cassette,or simply tape or cassette,is an analog magnetic tape recording format for audio recording and playback. It was developed by the Dutch company Royal Philips in Hasselt,Belgium,by Lou ottens and his team. It was introduced in September 1963. Compact Cassettes come in two forms,either already containing content as a prerecorded cassette (Musicassette),or as a fully recordable "blank" cassette. Both forms are reversible by the user.</p>
    </article>
    <footer class="flex items-center h-10 space-x-1 m-2">
        <div class="flex-1 text-center text-xs text-white font-semibold bg-green-500 px-3 py-1 rounded-md">Retro</div>
        <div class="flex-1 text-center text-xs text-black font-semibold bg-yellow-500 px-3 py-1 rounded-md">Continuous play</div>
        <div class="lex-1 text-center text-xs text-black font-semibold bg-red-500 px-3 py-1 rounded-md">Worse quality</div>
    </footer>
    </div>
</div>

操场上的完整代码在这里：

https://play.tailwindcss.com/g2Zso9QsCv

或者在 codepen 中：

https://codepen.io/littleTheRabbit/pen/jOyzrLb

拜托，我不想使用 Javascript 来阻止 mx-auto 获取最后一张卡片。我认为 flexBox 可以做到这一点。特别是 Tailwind CSS。如果可能，请尝试 TailwindCSS 解决方案。我可以编写自己的 CSS，但我不需要 Tailwind。我想发现TailwindCSS

的力量

PS：我在配置文件中添加了 xss 大小（否则是标准的 TailwindCSS 代码。

解决方法

也许网格可以做更多你想做的事。

<div class="grid md:grid-cols-2 lg:grid-cols-3 justify-items-center max-w-5xl mx-auto">

使用网格检查我们的示例： https://play.tailwindcss.com/89CSaFNmLi

,

将 justify-center 添加到

<div class="flex flex-wrap gap-5 justify-center">

,

这个怎么样？

将硬币容器 std::string 更改为：

<div>

这导致我将 <div class="grid justify-items-center sm:grid-cols-2 md:grid-cols-3 lg:flex lg:flex-wrap"> 与 grid 但在大屏幕中我将包裹 flexbox。请问您的意见？