Menu
I'm trying to inline 3 items on 1 row. Every item must have a bit of space. The problem is when I add margin the third item will wrap. I already tried to add negative margin to the parent but that's not working.
I made an example with my problem the example is using tailwindcss:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="flex flex-wrap -m-2">
<div class="bg-red-500 w-1/3 p-4 m-2">
test
</div>
<div class="bg-red-500 w-1/3 p-4 m-2">
test
</div>
<div class="bg-red-500 w-1/3 p-4 m-2">
test
</div>
</div>
</body>
</html>I cannot remove flex-wrap because it has to wrap every 3 items, and I cannot use padding.
How can I get this to work?
553
Your problem is that your divs are 1/3 their parent's width, but then when you add the margin in there, the total width goes over 100%. Unlike padding, which is counted as part of the element's width, margin is in addition to the element's width.
So there's two possible solutions here. The first is to set the width as 1/3 the parent width minus the desired margin. Since you used m-2 in your example, which appears to be .5rem according to Tailwind, we would double that number to account for margins on both the right and left sides of each box, and end up with this:
.flex-wrap > div {
width: calc(33.333333% - 1rem);
}<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
<div class="bg-red-500 p-4 m-2">
test
</div>
<div class="bg-red-500 p-4 m-2">
test
</div>
<div class="bg-red-500 p-4 m-2">
test
</div>
<div class="bg-red-500 p-4 m-2">
test
</div>
<div class="bg-red-500 p-4 m-2">
test
</div>
<div class="bg-red-500 p-4 m-2">
test
</div>
</div>If you don't like that, a second option that lets you keep a nice simple 1/3 width for each div is to use a border on each one that is the same color as the background color. Your design will necessitate if that is possible or not. Obviously if you have a background image or your divs are supposed to have borders according to the design then this may not work (though you could always nest divs to take care of the problem in the latter case).
.flex-wrap > div {
border: .5rem solid white;
}<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
<div class="bg-red-500 w-1/3 p-4">
test
</div>
<div class="bg-red-500 w-1/3 p-4">
test
</div>
<div class="bg-red-500 w-1/3 p-4">
test
</div>
<div class="bg-red-500 w-1/3 p-4">
test
</div>
<div class="bg-red-500 w-1/3 p-4">
test
</div>
<div class="bg-red-500 w-1/3 p-4">
test
</div>
</div>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
