可以根据 CSS 中的相邻块更改边界位置吗？

Question

我使用的是 flexbox 布局，其中有几个可以换行的块。我希望每个块根据其相对于相邻块的位置动态创建边框。

例如，如果它位于一个块的右侧，我希望在其左侧有一个边框。如果它在一个街区下方，我想要在它上面加一个边框。如果它正好在一组盒子中间，我希望它有一个完整的边框。

我最接近的解决方案是通过@media 根据视口宽度设置样式，但这还不够接近。

有什么建议吗？

编辑：这是一个 JSFiddle 的 link，它带有一个边栏，它的边框在换行时会发生变化（我知道代码很粗糙）：https://jsfiddle.net/crisis_sheep/zkh3yksn/1/embedded/result/

CSS的主要部分是：

@media all and (min-width: 60em) {
    .sidebar-content { 
        border-left-style:  solid;
        border-left-width:  1px;
        border-left-color:  black;
        margin-left:        10px;
    }
}

@media all and (max-width: 60em) {
    .sidebar-content {
        width:              70%;
        border-top-style:   solid;
        border-top-width:   1px;
        border-top-color:   black;
        margin-top:         10px;
    }
}

Answer 1

您可以使用伪元素和 overflow: hidden; 作为父元素

.border-cutter {
  overflow: hidden;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 100px;
  border-right: 0;
  margin: 5px 6px 6px 5px;
  flex: 0 1 200px;
  position: relative;
  background: #d0d;
}
.item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #000;
}
.item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 1px;
  background: #000;
}

<div class="border-cutter">
  <div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

可以根据 CSS 中的相邻块更改边界位置吗？

Possible to change border position based on adjacent blocks in CSS?

css

layout