html - 最后一行 flex 元素之间的边距不一致

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

问题是您的伪元素占用了最后一行的所有可用空间。

是的，这样做是为了抵消 justify-content: space-between 对两个 flex 元素的影响，这会导致它们出现在两端...

...但它也会破坏 space-between 在元素填满行时提供的比例间距。

在使用特定的最后一行对齐属性修改 flex 规范之前，您可以实现一个 hack 来解决这个问题:

Add invisible flex items after the last real item.

在下面的示例中，我在您的代码中添加了七个虚拟项。

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

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

.invisible { visibility: hidden; }

.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 class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
</div>

Revised Fiddle

更多信息:

• flex-grow not sizing flex items as expected
• Properly sizing and aligning the flex item(s) on the last row

---

旁注

您很有可能会遇到与此规则有关的问题:

.square { margin: 0.7vw 0 0.7% 1vw; }

flexbox specification建议不要在 flex 容器中使用百分比边距和填充。

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

还有一些:

4.2. Flex Item Margins and Paddings

Percentage margins and paddings on flex items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.