Flex：如果连续两列，则隐藏边框答案

【问题标题】：Flex: Hide border if two column in a rowFlex：如果连续两列，则隐藏边框
【发布时间】：2020-12-09 20:39:27
【问题描述】：

我有一个网格系统，其中可以连续显示 3 或 2 个项目。我想使用 CSS 为列项目放置一个单独的边框样式。

HTML

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

CSS

.container {
    display: flex;
.item {
    border-right:2px solid red;
}
.item:last-child{
    border-right:0px;
}

如果行中有两个项目，我需要删除第二个项目的边框样式

【问题讨论】：

你能解释一下你想做什么吗？不清楚

标签： css flexbox css-selectors

【解决方案1】：

最后一个孩子不起作用，因为它针对的是容器中的最后一个孩子。一个 hacky 的解决方案是向左添加一个边框，如果它是第一个元素，则以负边距隐藏它......

不确定它是否符合您的要求，但休闲剪断会产生类似的结果

.container-wrapper {
  padding: 0 10px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin-left: -12px;
}

.item {
    border-left: 2px solid red;
    min-width: 180px;
    margin: 10px 0 10px -2px;
    padding: 0 20px;
    background-color: #ccc;
    text-align: center;
    height: 50px;
}

<div class="container-wrapper">
  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
  </div>
</div>

【讨论】：

感谢您的尝试，看起来不错。但是负值的动态元素可能会隐藏一些内容，因为我们无法控制内容。
不，它不会隐藏内容，因为负边距等于边框和元素上的边距。这意味着内容将始终可见...
让我重新尝试一下，让你知道。谢谢。
顺便说一句，您的想法是隐藏左侧的标记...关键元素是隐藏在 .container 上的溢出。您可以将其与使用 after 伪元素绘制分隔符的其他解决方案结合使用。
谢谢 Zsolt，它帮助解决了我的问题 :)

【解决方案2】：

.container {display: flex;}
    
.item {
    background: #eee;
    width: calc(100% / 3);
    padding: 15px;

    margin:0 10px; 
    position: relative;
}
    .item::after {content: ' '; width: 2px; height: 100%; background-color: red; position: absolute; left: -10px; top: 0;}  
.item:first-child{
    margin-left: 0;
    
}
.item:first-child::after{
    display: none;
    
}   
    
@media only screen and (max-width: 768px)  {
        .item {width: calc(100% / 2);}
    }

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

【讨论】：

感谢您的尝试，Jone，就我而言，屏幕大小不是问题，容器中的项目可能更多或更少。就我而言。根据项目，我最多设置了三列。如果项目少于两列。所以不是屏幕尺寸。
当我尝试你的代码时，我得到了第二行项目的边框。