The Codesee The Codesee - 6 months ago 15
CSS Question

Inconsistent margin between flex items on last row

I'm using

flex
. There seems to be an unexpected margin difference between two
div
elements - the third row has a different margin between the divs than the first two rows:

enter image description here

How do I amend the code so that the third row's margin is the same as the first two rows?



.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.container:after {
flex: 1;
content: '';
}

.container form {
width: 100%;
display: flex;
}

.container .comment {
flex: 1;
}

.square {
padding: 10px;
width: calc(100% / 9);
margin: 0.7vw 0 0.7% 1vw;
background: red;
}

<div class="container">
<form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
<input class="comment" type="text">
<input type="submit">
</form>

<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>





JsFiddle: https://jsfiddle.net/4ydyoqmx/

Answer

There is a few different ways of doing this, depending on how you want the "squares" to respond:

flex-grow:

.square {
    flex-grow: 1;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

Fiddle: https://jsfiddle.net/4ydyoqmx/2/

inline-block:

.square {
    display: inline-block;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

Fiddle: https://jsfiddle.net/4ydyoqmx/4/

Third Option:

Removed content: '' from .container:after because that was causing problems

Comments