最后一行的弹性项目之间的边距不一致

Question

我在用着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>

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

Answer 1

这个问题可以通过将这段代码添加到你的CSS中来解决。

*{margin:0px;
padding:0px}

希望它有效..