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

根据您希望“方块”的响应方式，有几种不同的方法：

flex-grow：

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

小提琴：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;
}

小提琴：https://jsfiddle.net/4ydyoqmx/4/

第三种选择：

从content: ''移除了.container:after，因为这导致了问题

Answer 2

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

是的，这是为了抵消justify-content: space-between对两个弹性项目的影响，导致它们出现在两端......

...但是当项目填满行时，它也会杀死space-between提供的比例间距。

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

在最后一个真实项目之后添加隐形弹性项目。

在下面的示例中，我为您的代码添加了七个幻像项。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Revised Fiddle

更多信息：

旁注

您很有可能在此规则中遇到一些问题：

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

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

作者应该完全避免在弹性项目中使用填充或边距的百分比，因为它们会在不同的浏览器中获得不同的行为。

这里还有一些：

4.2. Flex Item Margins and Paddings

Flex项目的边距和填充百分比可以通过以下任一方式解决：


他们自己的轴（左/右百分比分解宽度，顶部/底部分辨高度），或，

内联轴（左/右/上/下百分比全部解析宽度）


用户代理必须选择以下两种行为之一。

注意：这种差异很糟糕，但它准确地捕获了当前的世界状态（实现之间没有达成共识，CSSWG内部没有达成共识）。这是CSSWG的意图，浏览器将收集其中一个行为，此时规范将被修改。

Answer 3

justify-content: space-between上的.container设置执行此操作（与flex-wrap: wrap;一起使用）：它最终将元素分布在那些被填充的行中，但是在最后一行看起来不太好，所以它在这些元素之间留下了预定义/默认的边距。（这与合理的文本段落相似）

避免这种情况的一种可能性是简单地删除justify-content: space-between，从而将其设置为默认left对齐（但它们不再分布在整个宽度上）：

https://jsfiddle.net/h8ejaob7/

Answer 4

这样做是因为你使用之间的空间来证明内容的合理性。所以在屏幕上它不能容纳第7个div，所以它只在屏幕上放置6个div并在6个div元素之间放置相等的空间。但是在最后一行只有2个div，这意味着你的第3行不完全充满div元素。这就是为什么它没有像上线那样放置空间的原因。

如果你再添加4个div，那么你将获得与上线相同的精确效果。

Answer 5

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

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

希望它有效..

最后一行上的flex项目之间的余量不一致

5 个答案:

旁注