html - 如何在 flexbox 行之间添加一条线？

Question

是否可以在 flexbox 行之间添加分隔线？

或者任何其他解决方案？

向所有元素添加边框不是一个选项，如您在示例中所见。

.container{
  width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
}

.item{
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
      padding: 16px;
    height: 65px;
    /* this is bab solution*/
    border-bottom: 1px solid #2662c3;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Link .

Answer 1

您可以在每个 item 上使用边框，虽然你需要他们的伪元素之一，绝对定位在顶部，全宽并设置 overflow: hidden在 container 上.

这样做的缺点是它们需要顶部(或底部)对齐，否则“边界线”可能会断开。

好的一面是，它会随元素内容动态移动，因此一行可以高于另一行。

堆栈片段

.container{
    width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
    overflow: hidden;              /*  added  */
}

.item{
    position: relative;            /*  added  */
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
    padding: 16px;
    height: 65px;
    margin-bottom: 1px;            /* compensate for border */
}

.item.higher{
    height: 95px;
}

.item::after{
    content: ' ';
    position: absolute;
    left: 0;
    top: -1px;
    width:100vw;
    border-top: 1px solid #2662c3;
}

.item{
    background: #eee;              /* for this demo only */
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item higher"></div>
  <div class="item higher"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

---

另一种方式，如果边框会根据不同的行高进行调整，则可以在 container 上使用伪元素。 ，并使用 order , 将它放在两行之间。

这样做的缺点是，只有 2 个伪行，最多只能处理 3 行。

堆栈片段

.container{
    width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
}

.item{
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
    padding: 16px;
    height: 65px;
}

.container::before{
    content: ' ';
    width:100%;
    border-top: 1px solid #2662c3;
    order: 1;
}

.container .item:nth-child(n+3){
    order: 1;
}

.item.higher{
    height: 95px;
}
.item{
    background: #eee;              /* for this demo only */
}

<div class="container">
  <div class="item higher"></div>
  <div class="item higher"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

---

超过3行，需要加一个额外的元素，可以加伪也可以不加，不加时这里显示。

堆栈片段

.container{
    width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
}

.item{
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
    padding: 16px;
    height: 65px;
}

.container .border{
    width:100%;
    border-top: 1px solid #2662c3;
}

.container .border:nth-of-type(1){
    order: 1;
}
.container .item:nth-child(n+3){
    order: 2;
}

.container .border:nth-of-type(2){
    order: 3;
}
.container .item:nth-child(n+5){
    order: 4;
}

.container .border:nth-of-type(3){
    order: 5;
}
.container .item:nth-child(n+7){
    order: 6;
}

.item.higher{
    height: 95px;
}
.item{
    background: #eee;              /* for this demo only */
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item higher"></div>
  <div class="item higher"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

  <span class="border"></span>
  <span class="border"></span>
  <span class="border"></span>
</div>