带间距的 CSS flexbox 装订线答案

【问题标题】：Css flexbox gutter with spacing带间距的 CSS flexbox 装订线
【发布时间】：2020-04-01 23:19:10
【问题描述】：

我正在尝试在 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。

我怎样才能让它工作？

【问题讨论】：

标签： html css flexbox tailwind-css gutter

【解决方案1】：

您的问题是您的 div 是其父级宽度的 1/3，但是当您在其中添加边距时，总宽度超过 100%。与被计算为元素宽度的一部分的填充不同，边距是除了元素的宽度。

所以这里有两种可能的解决方案。第一种是将宽度设置为父宽度减去所需边距的 1/3。由于您在示例中使用了m-2，根据 Tailwind，它似乎是 .5rem，我们会将这个数字加倍以考虑每个框左右两侧的边距，并最终得到以下结果：

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

【讨论】：

【解决方案2】：

您需要对您的 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>

希望有帮助。回复任何澄清。

【讨论】：

【解决方案3】：

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

只需为您的每个项目设置规则flex: 1 0 0;，如下面的 sn-p 所示。

最后一个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>

【讨论】：

【解决方案4】：

我不知道顺风，但使用香草 CSS，我可以实现它无需 hack calc 只需 flex: 1; 为每个孩子和 margin-right 为 :not(:last-child)

当然，我也可以使用 CSS 网格轻松完成（在项目之间均匀分布）。如果您提前知道只有 3 列，那么网格可能更容易：

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

【讨论】：

【解决方案5】：

这肯定会根据您的链接标签起作用：

<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://jsfiddle.net/sugandhnikhil/o62p7jez/

【讨论】：

这不是我们想要的结果。项目之间的宽度应该是恒定的。

【解决方案6】：

一个选项可以是使用透明边框代替边距和背景剪辑，以避免在边框下绘制背景。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

background-clip CSS 属性设置元素的背景是否延伸到其边框框、填充框或内容框下方。

【讨论】：

【解决方案7】：

我认为使用Tailwind - Gap 显示网格更容易实现这一点

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

【讨论】：