CSS: remove last element in line
that's my problem:
I have a list of things in a flex container and they are divided by a separator as shown in the screen below
The problem is when you resize and shrink the window they go on different lines and I would like to get rid of the separator that is in the last part of the line, so the rest is well centered.
BTW, I tried to use margins to create dividers, but then I had a problem centering them on each div size.
Any hint on how to do this with css?
Now I have the code
@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>
source to share
With pure CSS, I think this is very difficult (unless you want to use a media query to define every situation that can be changed in different browsers, etc.), so I suggest using js (jQuery) here. see example below.
Create a function separatorHandler()
, check the top position of each element if it is greater than the last element it is on a new line, then hide the previous separator, otherwise show the previous separator.
Also <center>
no longer supported in HTML5, just use a type class <div class="centered">
with csstext-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>
source to share
You can use nth-of-type()
at each breakpoint to target elements and change their style.
It might be easier to reason in this pen, where I wrote it in the stylus: https://codepen.io/sheriffderek/pen/53eda10aa154e6383be6be62ce324d95?editors=1100
but point,
... I don't know the break points, I mean it depends on the width. I am not quite clear on how to use this in this situation
at some point - with some parts of the layout, you have to take control and make decisions. What are the breakpoints and why do they change layout at the right times based on screen size and content. Computer and flexbox are really cool - but if you can't build in a logical system to interpret them - they're useless. The browser cannot decide when to set borders on its boxes only when it looks "right". I know this is not ideal, but this is what I end up using in production because there is no other way. You can check the columns with JavaScript and apply the classes, but it will still be 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;
}
}
source to share
If you are interested in a pure CSS solution, I would recommend using the :after
delimiter pseudo-class for this purpose. Then :last-of-type
and a :nth-child
selector to remove the pseudo-element display :after
.
So a pure CSS solution is a bit impractical as you need to specify all the media queries you want (but it works of course). It's much easier to do this using 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;
}
}
and 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>
Here's a working fiddle: https://jsfiddle.net/9wrL5oeL/
source to share