Menu
I have been trying to use content-between using Tailwind CSS to distribute rows in a container so that there is equal space between each line. Please help.
<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>
703
To distribute your items in a flex container with equal space between them, use justify-between.
Note: I added a height of
h-64to your flex container, or else it will never be bigger than the sum of your items heights and thus, never spread them with space in between.
<!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>If you don't care about the items being distributed across the whole container, but just about them having equal space, you can also go with the following options:
space on your container to control the space between child elementsgap on your container to control the gap between child elements (same as space in this single-row case, but it can handle a lot more complex cases) (specifically gap-y when you have flex-col)margin top on each child item, but the first, e.g. mt-4 (space does just that under the hood)content-between is useless in your case. In the Tailwind CSS docs it is listed under "Align Content: Utilities for controlling how rows are positioned in multi-row flex and grid containers."
The problem here is, this utility class is only for multi-row flex and grid containers. You got a single-row flex container.
It's a bit counter-intuitive at first, because you need to accept the notion that "row" means "line" here (it doesn't need to be horizontal, it can also be vertical!).
Think about it this way:
If the answer is yes, you got a "single-row flex".
This container has 3 rows with 2 items each. The content-between distributes the rows such that there is an equal amount of space between each row.
<!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>This container has a single "row" with 3 items (like your code).
<!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>
answered Aug 12 '26 12:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With