Css 带间距的 flexbox 装订线

Question

我正在尝试在 1 行内嵌 3 个项目。每个项目必须有一点space。问题是当我添加保证金时第三项将包装。我已经尝试添加负边距到 parent 但这不起作用。

我用我的问题做了一个例子，这个例子使用的是 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。

我怎样才能让它工作？

Answer 1

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

所以这里有两种可能的解决方案。第一种是将宽度设置为 parent 宽度减去所需边距的 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 宽度，即在每个边框上使用与背景颜色相同的边框颜色。无论是否可能，您的设计都是必要的。显然，如果你有背景图片或者你的 divs 根据设计应该有边框，那么这可能不起作用（尽管你总是可以嵌套 divs 来解决后者的问题例）。

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

Answer 2

您需要对您的 css 稍作修改。由于父级宽度为 100%，每个子级宽度为 33.33%，因此它不会在一行中包含边距。边距位于元素顶部，因此总宽度变为 > 100%，最后一个元素移至新行。

所以，我们将在这里使用calc。我们需要以一种可以容纳边距的方式来设置宽度。所以，如果 width = calc(33.33% - 20px)，这意味着，根据 div 我们有 20px space 可以用来在每边给出 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>

希望对您有所帮助。回复任何说明。

Answer 3

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

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

最后一个 0 告诉 flexbox 忽略每个项目的初始宽度，然后 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>

Answer 4

我不知道 tailwind，但是使用 vanilla CSS，我可以 无需 hack calc 只需 flex: 1; 对于每个 child 和 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>

Answer 5

这肯定会根据您的 link 标签工作：

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

Answer 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

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Answer 7

我认为通过 Tailwind - Gap

显示网格更容易实现

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

Css 带间距的 flexbox 装订线

Css flexbox gutter with spacing

html

css

gutter

flexbox

tailwind-css