Question

我正在使用带有几个可以换行的块的flexbox布局。我希望每个块动态创建一个边框，具体取决于它相对于相邻块的位置。

例如，如果它在一个块的右边，我想在它的左侧有一个边框。如果它低于一个街区，我想在它上面有一个边界。如果它在一组盒子的中间，我希望它有一个完整的边框。

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

有什么建议吗？

编辑：这是一个带有侧边栏的JSFiddle的链接，其边框在换行时更改（代码非常粗制，我知道）：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中的相邻块更改边框位置吗？

1 个答案: