CSS: remove last element in row

user_5647864 0
Viewed 2450

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 screen1 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. enter image description here

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>

flexbox css html
4 Answers
<div id="list">
    <div class="item">
      <p>1</p>
    </div>
    <div class="bullet">●</div>
    <div class="item">
         <p>2</p>
  </div>
    <div class="bullet">●</div>
    <div class="item">
         <p>3</p>
      </div>
   <div class="bullet">●</div>
   <div class="item">
      <p>4</p>
   </div>
   <div class="bullet">●</div>
   <div class="item">
      <p>5</p>
   </div>
   <div class="bullet">●</div>
    <div class="item">
     <p>6</p>
    </div>
  </div>


<style>
#list{
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
      flex-wrap: wrap;
    }
.item{
  margin: 0 20px;
}
</style>


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

        function separatorHandler() {
            let widthElement = $('#list').outerWidth();

            $('.bullet').each(function() {
                $(this).show();
                if($(this).position().left < 10 || $(this).position().left > widthElement - 15) {
                    $(this).hide();
                }


            });
        }
        </script>

Add some updates. I'm searching all bullet element. Next each element take position, if element postition left or right less as element width i'm hiding this element.

user_128569740
Related