Я использую flex
. Кажется, что существует неожиданная разница в разнице между двумя элементами div
- третья строка имеет разное поле между div, чем первые две строки:
Как изменить код так, чтобы край третьей строки был таким же, как первые две строки?
.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>