I use the pseudo-element :after
to align at the left the last line of a list of blocks. I used space-evenly
to justify these blocks. My problem is that the blocks of the last line aren’t aligned with the users because of the :after
that taking up the space. How can I fix that?
.exposegrid {
width: 500px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
&:after {
content: "";
flex: auto;
}
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
2
Answers
The:after pseudo-element is occupying space in the flex container and interfering with the alignment of the items in the last row, which is the root cause of the problem you’re encountering. Use of a margin on the:after pseudo-element as an alternative to flex auto is one approach to this issue. Here is your CSS in its most recent iteration:
just use
display: grid;
it was meant for that type of layout, for example