如何解决Tailwind CSS 的基础:grid-padding-x 和 grid-margin-x?
我们如何在 Tailwind CSS 中制作装订线?
我尝试使用以下 gap-4:
const pathname = Object.assign( {},useLocation() ).pathname;
但是 result 并不是我作为 Foundation 中的 gutters 想要实现的:
<div class="flex flex-col justify-center items-center h-64 bg-green-100 gap-4">
<div class="flex flex-wrap justify-center items-center gap-4 w-full">
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
</div>
</div>
我应该在台湾寻找gaps吗?还是别的什么?
解决方法
对 flexbox 使用 space-x-<n>
和/或 space-y-<n>
(Space Between)。
对网格使用 gap-<n>
(Gap)。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-row space-x-4 bg-red-200">
<div class="bg-red-400 p-4 flex-grow">Flex</div>
<div class="bg-red-400 p-4 flex-grow">Flex</div>
<div class="bg-red-400 p-4 flex-grow">Flex</div>
<div class="bg-red-400 p-4 flex-grow">Flex</div>
</div>
<br>
<div class="grid grid-flow-row grid-cols-4 gap-4 bg-blue-200">
<div class="bg-blue-400 p-4">Grid</div>
<div class="bg-blue-400 p-4">Grid</div>
<div class="bg-blue-400 p-4">Grid</div>
<div class="bg-blue-400 p-4">Grid</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。