我一直在尝试在使用Tailwind CSS之间使用内容来分布容器中的行，以便每行之间有相等的空间。请帮忙。
<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>
解决方案
要在弹性容器中以相等的空间分配项目，请使用justify-between。
注意：我在你的柔性容器中添加了
h-64的高度，否则它永远不会大于你的物品高度之和，因此，永远不要在它们之间留出空间。
<!DOCTYPE html>
<html lang="en"><head><script src="https://cdn.tailwindcss.com"></script></head>
<body>
<div class="w-96 mx-10">
<div class="flex flex-col justify-between h-64">
<div class="bg-red-400">
<h2 class="text-3xl">Technology Used</h2>
</div>
<div class="text-lg bg-blue-200">
<ul>
<li>ITEM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
<li>ITEM4</li>
</ul>
</div>
<div class="bg-green-100">{project.description}</div>
</div>
</div>
</body>
</html>如果你不在乎物品分布在整个容器中，只在乎它们有相等的空间，你也可以选择以下选项：
- 在容器上设置
space以控制子元素之间的空间 - 在容器上设置
gap以控制子元素之间的间隙(与单行情况下的空格相同，但它可以处理更复杂的情况((当您有flex-col时，特别是gap-y( - 在每个子项上设置相同的
margin顶部，但第一个，例如mt-4(space只是在引擎盖下这样做(
说明
content-between在您的情况下是无用的在Tailwind CSS文档中；对齐内容：用于控制行在多行flex和网格容器中的定位方式的实用程序">
这里的问题是，这个实用程序类只适用于多行flex和grid容器您得到了一个单行flex容器。
一开始这有点违背直觉，因为你需要接受"行"；是指"；行"；这里(它不需要是水平的，也可以是垂直的！(。
这样想：
- "你的物品是放在一行(！((水平还是垂直(">
- "你的列表是线性的(不是二维数组(吗">
如果答案是肯定的，则得到一个"是"；单行柔性"；。
多行容器示例
这个容器有3行，每行有2个项目。CCD_ 11分配行，使得每一行之间具有相等量的空间。
<!DOCTYPE html>
<html lang="en"><head><script src="https://cdn.tailwindcss.com"></script></head>
<body>
<div class="p-2 text-white font-bold">
<div class="h-44 grid grid-cols-2 content-between gap-2 text-center">
<div class="p-1 rounded-lg bg-violet-500">row 1</div>
<div class="p-1 rounded-lg bg-violet-500">row 1</div>
<div class="p-1 rounded-lg bg-violet-500">row 2</div>
<div class="p-1 rounded-lg bg-violet-500">row 2</div>
<div class="p-1 rounded-lg bg-violet-500">row 3</div>
</div>
</div>
</body>
</html>单行容器示例
这个容器有一个单独的"；行"；包含3个项目(如您的代码(。
<!DOCTYPE html>
<html lang="en"><head><script src="https://cdn.tailwindcss.com"></script></head>
<body>
<div class="p-2 text-white font-bold">
<div class="h-44 flex flex-col text-center gap-2">
<div class="p-1 rounded-lg bg-violet-500">item 1</div>
<div class="p-1 rounded-lg bg-violet-500">item 2</div>
<div class="p-1 rounded-lg bg-violet-500">item 3</div>
</div>
</div>
</body>
</html>检查下面的代码。这可能会奏效。使用间隙表示相等的空间。
<div className="w-96 mx-10">
<div className="flex flex-col content-between gap-4">
<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>
你能检查一下下面的代码吗？希望对你有用。您需要像下面的代码一样在父元素中添加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>
要在flex列中使用Tailwind以相等的间距分布行，需要使用justify-between。此外，请确保flex容器垂直拉伸以分配空间。
将代码中的content-between替换为justify-between：
<div className="w-96 mx-10 h-full">
<div className="flex flex-col justify-between h-full">
<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>
这将平均分配行之间的空间。