在启用水平滚动的情况下，如何使第二行显示为新行
每条新行应添加到底部
https://play.tailwindcss.com/AkDQ2ef5mI?size=354x720
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="flex mx-2 space-x-1 text-center overflow-x-auto md:overflow-x-hidden md:space-x-0 md:grid-cols-12 md:gap-1 md:grid">
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<!--second line -->
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
</div>
</body>
</html>
您可以在父级下创建两个div，然后根据设备将父级div更改为flex-col或flex-row。这样你就可以达到预期的效果。
https://play.tailwindcss.com/pURsrFHUno?size=758x720
<div class="flex flex-col sm:flex-row mx-2 space-x-1 text-center overflow-x-auto md:overflow-x-hidden md:space-x-0 md:grid-cols-12 md:gap-1 md:grid">
<div class="flex flex-row">
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
</div>
<div class="flex flex-row">
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
</div>
</div>
在下一个div中添加flex col，后跟body标记
flex col
https://play.tailwindcss.com/LoGAnm9EaI?size=354x720