1

我们如何在 Tailwind CSS 中做排水沟？

我在下面的gap-4尝试：

<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>

但结果并不是我在 Foundation 中想要达到的效果：

<div class="grid-x grid-margin-x">
  <div class="cell medium-6 large-4">12/6/4 cells</div>
  <div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
  <div class="cell medium-6 large-4">12/6/4 cells</div>
  <div class="cell medium-6 large-8">12/6/8 cells</div>
</div>

我应该在 TW 中寻找差距吗？或者是其他东西？

4

1 回答 1

1

使用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>

于 2021-07-20T05:39:54.607 回答