CSS：删除最后一个元素，在

Question

一行是我的问题：

我有东西在Flex容器名单，他们用同样的显示在屏幕下方 问题隔离器隔开，当你调整窗口的大小并使其变小，它们在不同的行上，我想摆脱位于行最后部分的分隔符，以便其余部分很好地居中。

顺便说一下，我试图使用利润率做分隔符，但后来我有问题集中在每个大小的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()，检查每个项目的顶部位置，如果它高于它在新行中的最后一个项目，则隐藏前一个分隔符，否则显示前一个分隔符。

而且<center>不再在HTML5支持，只需使用一类像<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>

Answer 2

您可以使用nth-of-type()在每个休息点为目标的元素和改变自己的风格。

它可能会更容易在这个笔来思考，我写在手写笔：https://codepen.io/sheriffderek/pen/53eda10aa154e6383be6be62ce324d95?editors=1100

但问题是，

...我不知道这个破发点，我的意思是它取决于宽度。我不 相当明白如何在这种情况下使用

在某些时候 - 在布局的某些部分，你必须控制和做出决定。什么是突破点，以及为什么这些是根据屏幕尺寸和内容更改布局的正确时机。计算机和柔性盒真的很酷 - 但如果你不能建立一个逻辑系统供他们解释 - 它们是毫无价值的。只要浏览器看起来“正确”，浏览器就无法决定何时在框上放置边框。我知道这并不理想，但这正是我最终用于生产的原因 - 因为没有其他办法。您可以使用JavaScript检查列并应用类 - 但这仍然会像这样。

.thing-list { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 
.thing { 
    flex-basis: 100%; 
} 
.thing:not(:last-of-type) { 
    border-bottom: 5px solid #00f; 
} 
@media (min-width: 700px) { 
    .thing { 
    flex-basis: 50%; 
    } 
    .thing:not(:last-of-type) { 
    border-bottom: 0; 
    } 
    .thing:nth-of-type(2n+1) { 
    border-right: 5px solid #800080; 
    } 
} 
@media (min-width: 1000px) { 
    .thing { 
    flex-basis: 25%; 
    } 
    .thing, 
    .thing:nth-of-type(2n+1) { 
    border-right: 5px solid #008000; 
    } 
    .thing:nth-of-type(4n + 4) { 
    border-right: 0; 
    } 
} 

Answer 3

如果你有兴趣在纯CSS的解决方案，我会建议使用:after伪类用于分隔符用于这一目的。然后:last-of-type和:nth-child用于删除:after伪元素显示的选择器。

所以纯CSS的解决方案 - 因为你需要指定你需要的所有媒体查询（但它的作品，当然）有点不切实际。使用JavaScript更容易。

CSS：

.flex-container { 
    display: flex; 
    /* ... */ 
    flex-flow: row wrap; 
} 

.flex-item { 
    display: block; 
    /* ... */ 
    position: relative; 
} 

.flex-item:after { 
    content: ""; 
    display: block; 
    background-color: white; 
    width: 2px; 
    height: 100%; 
    position: absolute; 
    right: -20px; 
    top: 0; 
} 

/* funny part */ 
.flex-item:last-of-type:after { 
    display: none; 
} 
@media (max-width: 365px) { 
    .flex-item:after { 
     display: none; 
    } 
} 
@media (min-width: 366px) and (max-width: 549px) { 
    .flex-item:nth-child(2n):after { 
     display: none; 
    } 
} 
@media (min-width: 550px) and (max-width: 727px) { 
    .flex-item:nth-child(3n):after { 
     display: none; 
    } 
} 

和HTML：

<div class="flex-container"> 
    <div class="flex-item"><p>Foo</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
</div> 

这里的工作小提琴：https://jsfiddle.net/9wrL5oeL/