CSS：删除行中的最后一个元素

Question

这就是我的问题：

我在弹性容器中有一个列表，它们被分隔符分开，如下面的屏幕所示 问题是，当您调整窗口大小并使其变小时，它们会位于不同的行上，我想删除该行最后部分的分隔符，以便其余部分很好地居中。

顺便说一下，我尝试使用边距来制作分隔符，但后来我在将它们集中在 div 的每个尺寸上时遇到了问题。

有什么提示如何用 css 来实现这一点吗？

这就是我现在的代码

@import "compass/css3";

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
 justify-content: space-around;
  align-items: center;
  
}

.flex-item {


  padding: 5px;
  margin-top: 10px;
  min-width:100px;
  line-height: 150px;
  color: blaclk;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center; 
  opacity: 0.7;
  

}
.flex-item img{
  width: 100%;
}



.separator{
  background: rgb(127, 0, 0);
  background: rgba(192,192,192,.5);
  width: 1px;
height: 100px;


}

<div class="flex-container">
<div class="flex-item " ><center><p> 1 </p></center></div>
  <div class="separator"></div>
<div class="flex-item " ><center><p> 2 </p></center></div>
  <div class="separator"></div>
<div class="flex-item " ><center><p> 3 </p></center></div>
  <div class="separator"></div>
<div class="flex-item " ><center><p> 4 </p></center></div>
 </div>

Answer 1

使用纯CSS我认为这是非常困难的（除非你想使用媒体查询来定义每种情况，这在不同的浏览器等中可能会有所不同），所以我建议在这里使用js（jQuery）。请参见下面的示例。

创建一个函数separatorHandler()，检查每个项目的顶部位置，如果它高于新行中的最后一个项目，则隐藏前一个分隔符，否则显示前一个分隔符。

HTML5也<center>不再支持，只需使用类似于<div class="centered">css 的类text-align: center;

$(window).resize(function() {
  separatorHandler();
}).trigger('resize');

function separatorHandler() {
  var lastItemTop = $('.flex-item').first().position().top;
  $('.flex-item').each(function() {
    if ($(this).position().top > lastItemTop) {
      lastItemTop = $(this).position().top;
      $(this).prev('.separator').hide();
    } else {
      $(this).prev('.separator').show();
    }
  });
}

@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.flex-item {
  padding: 5px;
  margin-top: 10px;
  min-width: 250px;
  line-height: 150px;
  color: blaclk;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  opacity: 0.7;
}

.flex-item img {
  width: 100%;
}

.flex-item:nth-child(2n) {
  background: red;
}

.separator {
  background: rgb(127, 0, 0);
  background: rgba(192, 192, 192, .5);
  width: 5px;
  height: 100px;
}

.centered {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item ">
    <div class="centered">
      <p> 1 </p>
    </div>
  </div>
  <div class="separator"></div>
  <div class="flex-item ">
    <div class="centered">
      <p> 2 </p>
    </div>
  </div>
  <div class="separator"></div>
  <div class="flex-item ">
    <div class="centered">
      <p> 3 </p>
    </div>
  </div>
  <div class="separator"></div>
  <div class="flex-item ">
    <div class="centered">
      <p> 4 </p>
    </div>
  </div>
</div>