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

Question

各位，

拜托，我正在试验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代码。

Answer 1

添加 justify-center 到

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

Answer 2

也许网格可以满足您的更多需求。

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

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

Answer 3

这个呢？

将硬币容器<div> 更改为：

<div class="grid justify-items-center sm:grid-cols-2 md:grid-cols-3 lg:flex lg:flex-wrap">

这导致我将grid 和justify-items-center 一起使用，但在大屏幕上我将包装flexbox。请问您的意见？