CSS: remove last element in row

Question

that's my problem:

I have a list of things in a flex container and they are divided by a separator like is shown in the screen below Problem is, when you resize the window and make it smaller, they go on different rows and I'd like to get rid of the separator that is in the last part of the row, so that the rest is well centered.

By the way I tried to use margins to make the separators, but then I had problem centering them on every size of the div.

Any hint how to accomplish that with css?

That's the code I have now

@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

With pure CSS I think it is very hard (unless you want to use media query to define every single situation which may be varied in different browser etc), so I will suggest use js (jQuery) here. see the example below.

Create a function separatorHandler(), check each item's top position, if it is higher than the last item it is in the new line, then hide the previous separator, otherwise show the previous separator.

Also <center> no longer support in HTML5, just use a class like <div class="centered"> with 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

You can use nth-of-type() at each break-point to target the elements and change their style.

It may be easier to reason about in this pen where I wrote it in stylus: https://codepen.io/sheriffderek/pen/53eda10aa154e6383be6be62ce324d95?editors=1100

but the point is,

...I don't know the break points, I mean it depends on the width. I don't quite understand how to use that in this situation

at some point - with certain parts of the layout, you have to take control and make the decisions. What are the break-points and why are those the right times to change the layout based on screen-size and content. The computer and flexbox are really cool - but if you can't build in a logic system for them to interpret - they are worthless. The browser can't decide when to put borders on your boxes just whenever it looks 'right.' I know that this isn't ideal, but It's what I end up using in production - because there isn't any other way. You could check the columns with JavaScript and apply classes - but that would still be just like this.

.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;
  }
}