html - 如何在弹性框行之间添加一条线？

Question

是否有可能在弹性框行之间添加分隔线？

或者任何其他解决方案？

如您在示例中所见，为所有元素添加边框不是一种选择。

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

链接。

标签： htmlcssflexbox

Answer 1

您可以在item每个.overflow: hiddencontainer

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

好处是，它会随着项目内容动态移动，因此一行可以高于另一行。

堆栈片段

.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 行之间。

这样做的缺点是，只有 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>