Jam*_*mie 4 html css gutter flexbox tailwind-css
我正在尝试在 1 行上内联 3 个项目。每件物品都必须有一点空间。问题是当我添加边距时，第三个项目将换行。我已经尝试向父级添加负边距，但这不起作用。
我针对我的问题做了一个示例，该示例使用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>我无法删除，flex-wrap因为它必须每 3 个项目包装一次，而且我无法使用padding.
我怎样才能让它发挥作用？
您的问题是您的 div 是其父级宽度的 1/3，但是当您在其中添加边距时，总宽度会超过 100%。与 padding 不同，padding 被算作元素宽度的一部分，margin 是在元素宽度之外的。
所以这里有两种可能的解决方案。第一种是将宽度设置为父宽度减去所需边距的 1/3。由于您m-2在示例中使用了似乎是.5rem根据 Tailwind 的内容，因此我们会将该数字加倍以考虑每个框右侧和左侧的边距，并最终得到以下结果：
.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>如果您不喜欢这样，可以让您为每个 div 保留简单的 1/3 宽度的第二个选项是在每个 div 上使用与背景颜色相同颜色的边框。如果可能的话，您的设计将是必要的。显然，如果您有背景图像或者您的 div 根据设计应该有边框，那么这可能不起作用（尽管您始终可以嵌套 div 来解决后一种情况下的问题）。
.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>