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>

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>

Answer 2

使用背景色在中心创建一条线：

.container {
  width: 400px;
  flex-flow: row wrap;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid #2662c3;
  /*you border*/
  background: linear-gradient(#2662c3, #2662c3) center/100% 1px no-repeat;
}

.item {
  box-sizing: border-box;
  flex: 1 1 150px;
  max-width: 150px;
  padding: 16px;
  height: 65px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

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

2 个答案: