防止并排元素周围的双边框

Question

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

但是如果你使用flexbox flex-basis规则将容器分成下一行，它会破坏整个border-right的想法，在中断之前行中的最后一个容器总是保持不带边框。

e.g。在这个例子中，我有5个容器，但我想要每行4个，当它突破新行时，你可以看到border-right问题：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/45kngj9p/

Answer 1

由于您知道每行中有多少个弹性项目，因此您可以使用: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 2

删除并添加Border:none;

margin-left:-1px;

就是这样！

Answer 3

您可以尝试以下解决方案：

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;
}