柔性容器css行线

Question

只有纯CSS！

我有一个div元素用作包装中的弹性容器，包含显示在4列中的元素。我需要在该容器内的行之间显示行。

我为每个flex元素设置了border-bottom属性，但这使得最后一行的行占用了那一行中的元素。

有没有什么办法让容器中的最后一个元素显示直到行尾，而不增加其宽度？

或其他任何想法来处理这个？

说明：容器中元素的数量是动态的，所以我不知道最后一行中有多少元素。

HTML

<div id="container"> 
<div class="element"> 
    <div class="content"> 
    </div> 
</div> 
<div class="element"> 
    <div class="content"> 
    </div> 
</div> 
.... 
</div> 

CSS

#container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.element { 
    flex: 0 0 25%; 
    border-bottom: 1px solid green; 
} 

.content { 
margin: 10px; 
border: 3px solid green; 
background-color: yellow; 
height: 30px; 
} 

演示小提琴：https://jsfiddle.net/sfhLw1dh/

谢谢！

Answer 1

有一个窍门或劈不管你说什么，如：

给border-bottom: 1px solid green;到#container和margin-bottom: -1px;到.element。

#container { 
    display: flex; 
    flex-wrap: wrap; 
    border-bottom: 1px solid green; 
} 

.element { 
    flex: 0 0 25%; 
    border-bottom: 1px solid green; 
    margin-bottom: -1px; 
} 

Fiddle

Answer 2

甲定位伪元素可以管理它：

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    overflow: hidden; 
 
} 
 
.element { 
 
    flex: 0 0 25%; 
 
    border-bottom: 1px solid green; 
 
    position: relative; 
 
} 
 
.element:last-child:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 100%; 
 
    height: 0; 
 
    border-bottom: inherit; 
 
    /* Look it's automatic */ 
 
    width: 2000px; 
 
    /* or some really large value */ 
 
} 
 
.content { 
 
    margin: 10px; 
 
    border: 3px solid green; 
 
    background-color: yellow; 
 
    height: 30px; 
 
}

<div id="container"> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
</div>