最后一行上的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

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

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

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

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

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

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

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

修改小提琴

更多信息：

• flex-grow不按预期调整flex项目的大小
• 正确调整最后一行的弹性项目的大小和对齐方式

---

边注

你很可能会遇到这个规则的一些麻烦：

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

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

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

这里还有一些：

4.2。 Flex项目边距和填充

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

• 他们自己的轴（左/右百分比分解宽度，顶部/底部分解高度），或，
• 内联轴（左/右/上/下百分比全部解析宽度）

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

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

Answer 2

有几种不同的方法可以做到这一点，具体取决于你希望“方块”如何响应：

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 3

这是justify-content: space-between .container justify-content: space-between设置，它执行此操作（与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}

希望它有效..