带间距的Css flexbox装订线

我试图在一行中嵌入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>

你的问题是，你的div是其父宽度的1/3，但当你在那里添加边距时，总宽度超过100%。与作为元素宽度一部分的填充不同，边距是元素宽度的补充。

所以这里有两种可能的解决方案。第一种方法是将宽度设置为父宽度的1/ 3减去所需的边距。由于您在示例中使用了m-2，根据Tailwind的数据，m-2似乎为0.5雷姆，因此我们将该数字加倍，以考虑每个盒子左右两侧的边距，最终得到如下结果:

.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>

你需要对你的css做一些小小的修改。由于父宽度是100%,每个子宽度是33.33%,所以包括边距在内，它不能容纳在一行中。页边距在元素的顶部，因此总宽度大于100%，最后一个元素移动到新行。

因此，我们将在这里使用calc。我们需要有足够的宽度来容纳余量。因此，如果width = calc(33.33% - 20px)，这意味着，每个div有20px的空间，可以用来在每边提供10px的边距。为了保持一致性，请确保给定的边距是从33.33%中减去的值的50%。

更新了代码(添加了一个样式标签并相应地修改了css):

<!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>
  <style>
    .test {
      width: calc(33.33% - 20px);
      margin: 10px;
    }
  </style>
</head>
<body>
<div class="flex flex-wrap">
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div>
</div>
</body>
</html>

如果你和我一样，不喜欢使用33.33333333% -1rem的想法，可以使用内置的flexbox属性。

只需设置规则flex:1 0 0；如下面的代码片段所示。

最后一个0告诉flexbox忽略每个项目的首字母with，然后1告诉它增长，直到所有项目达到flexbox容器的全部宽度。(第一个0告诉它不要缩小到比它包含的文本更小。)

<!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>
  <style>
    .custom-flexbox-1 > div {
      flex: 1 0 0;
    }
    html {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="flex flex-wrap -m-2 custom-flexbox-1">
    <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>

这肯定会与您的链接标签一致:

<div class="flex flex-wrap " style="justify-content: space-evenly;">
    <div class="bg-red-500 p-4 m-2 " style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>
  </div>

检查:https://js fiddle . net/sugandhnikhil/o62p 7 jez/

一种选择是使用透明边框代替空白和背景剪辑，以避免在边框下绘制背景。

.bg-red-500 {
  border: 0.5em transparent solid;
  background-clip: padding-box;/* do not draw me where borders stand */
}

<!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 ">
      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>
</body>

</html>

我不知道tailwind，但有了vanilla CSS，我可以不用hack calc，只需通过flex:1；对于每个子代，右边距为:not(:最后一个子代)

当然，我也可以很容易地用CSS grid来完成(在项目之间均匀分布)。如果您事先知道只有3列，那么对于grid来说甚至会更容易:

.container {
  height: 100px;
  background: red;
  display: flex;
}
.child {
  background: blue;
  flex: 1;
}
.child:not(:last-child) {
  margin-right: 10px;
}

/* Grid way */
.container-grid {
  height: 100px;
  background: red;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 10px;
}
.child-grid {
  background: blue;
}

/* Even be easier if you know ahead that there're only 3 items */
.container-grid-3 {
  background: red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.child-grid-3 {
  height: 100px;
  background: blue;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<hr>

<div class="container-grid">
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
</div>

<hr>

<div class="container-grid-3">
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
</div>

我认为这更容易实现通过显示网格这与顺风差距

<div class="grid gap-3 grid-cols-2">
    <div>01</div>
    <div>02</div>
</div>

在许多情况下，您可以通过使用依赖断点的flex-wrap / flex-nowrap并只设置& quot差距& quot需要的时候。

比如说。在大屏幕上，你不希望换行，希望元素之间有间隙

你可以用不同的方式组合它，获得你想要的行为。