Tailwind CSS - 项目之间的垂直空间

Posted 2023-03-06

【中文标题】Tailwind CSS - 项目之间的垂直空间

【英文标题】：Tailwind CSS - Vertically space between items

【发布时间】：2021-04-06 10:18:55

【问题描述】：

我一直在尝试使用使用 Tailwind CSS 的 content-between 来分配容器中的行，以便每行之间有相等的空间。请帮忙。

            <div className="w-96 mx-10">
              <div className="flex flex-col content-between">
                <div className="bg-red-400">
                  <h2 className="text-3xl">Technology Used</h2>
                </div>
                <div className="text-lg bg-blue-200">
                  <ul>
                    <li>ITEM1</li>
                    <li>ITEM2</li>
                    <li>ITEM3</li>
                    <li>ITEM4</li>
                  </ul>
                </div>
                <div className="bg-green-100">project.description</div>
              </div>
            </div>

【问题讨论】：

` ` 应该是 ` ` 吗？这是documentation

【参考方案1】：

你能检查一下下面的代码吗？希望它对你有用。您需要在父元素中添加space-y-2 类，如下面的代码。

参考链接：https://tailwindcss.com/docs/space

<div className="flex flex-col content-between space-y-2">
  <div className="bg-red-400">
    <h2 className="text-3xl">Technology Used</h2>
  </div>
  <div className="text-lg bg-blue-200">
    <ul>
      <li>ITEM1</li>
      <li>ITEM2</li>
      <li>ITEM3</li>
      <li>ITEM4</li>
    </ul>
  </div>
  <div className="bg-green-100">project.description</div>
</div>