防止 side-by-side 元素周围出现双边框

Question

如果您有多个具有 1px 边框的容器，所有相邻的容器都会生成 2px 边框。所以为了摆脱你总是设置例如border-right: none; 然后将 border-right: 1px; 添加到最后一个 child 以使所有容器的所有边都有 1px 边框。

但是如果你使用 flexbox flex-basis 规则将容器分成下一行，它会打破整个 border-right 的想法，中断之前行中的最后一个容器总是被排除在外，没有边框。

例如在此示例中，我有 5 个容器，但我希望每行 4 个，当它换行时，您可以看到 border-right 问题：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}

.container {
  flex-basis: 20%;
  border: 1px solid #000;
  border-right: none;
  margin-bottom: 1px;
  min-height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container:last-child {
  border-right: 1px solid #000;
}

<div class="wrapper">
  <div class="container">1</div>
  <div class="container">2</div>
  <div class="container">3</div>
  <div class="container">4</div>
  <div class="container">5</div>
</div>

https://jsfiddle.net/45kngj9p/

Answer 1

您可以尝试这些解决方案：

1

此处不需要 .container:last-child 样式。

.container {
  flex-basis: 20%;
  border: 1px solid #000;
  margin-bottom: 1px;
  margin-right: -1px;
  min-height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

2

这个适用于 4、8、12 等箱子

.container {
  flex-basis: 20%;
  border: 1px solid #000;
  border-right: none;
  margin-bottom: 1px;
  min-height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container:last-child,
.container:nth-child(4n) {
  border-right: 1px solid #000;
}

Answer 2

由于您知道每行中有多少个弹性项目，因此您可以使用 :nth-child() 选择器将边框应用于主规则遗漏的项目。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}
.container {
  flex-basis: 20%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  margin-bottom: 1px;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container:nth-child(4n + 1) { /* add border to first child in each row */
  border-left: 1px solid red;
}

<div class="wrapper">
  <div class="container">1</div>
  <div class="container">2</div>
  <div class="container">3</div>
  <div class="container">4</div>
  <div class="container">5</div>
</div>

<hr>

<div class="wrapper">
  <div class="container">1</div>
  <div class="container">2</div>
  <div class="container">3</div>
</div>

<hr>

<div class="wrapper">
  <div class="container">1</div>
  <div class="container">2</div>
  <div class="container">3</div>
  <div class="container">4</div>
  <div class="container">5</div>
  <div class="container">6</div>
  <div class="container">7</div>
  <div class="container">8</div>
  <div class="container">9</div>
  <div class="container">10</div>
</div>

Answer 3

删除 Border:none; 并添加 margin-left:-1px;

.container {
  flex-basis: 20%;
  border: 1px solid #000;
  margin-left:-1px;
  margin-bottom: 1px;
  min-height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

就是这样！

防止 side-by-side 元素周围出现双边框

Prevent double borders around side-by-side elements

html

css

border

flexbox

1

2