最后一行的弹性项目之间的边距不一致 [英] Inconsistent margin between flex items on last row

问题描述

我正在使用 flex 。在两个 div 元素之间似乎有一个意想不到的差距 - 第三行在div之间有一个不同于前两行的边距：

解决方案

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

是的，这是为了消除 justify-content：space-between 在两个弹性项目，这导致他们出现在对面的两端...

.pngrel =nofollow noreferrer>

...但是它也会杀死空格之间的比例间距在项目填充行时提供。

直到flex规范修改为特定的最后一行对齐属性，您才可以实现解决此问题的hack：
$ b

在最后一个实际项目之后添加不可见的flex项目。

在下面的示例中，我已经为您的代码添加了七个幻像项目。 / p>

  .container {display：flex; flex-wrap：wrap; justify-content：space-between;} / *。container：after {flex：1;内容：'';} * /。invisible {visibility：hidden; } .container表单{width：100％; display：flex;}。container .comment {flex：1;}。square {padding：10px;宽度：计算（100％/ 9）;保证金：0.7vw 0 0.7％1vw;背景：red;}  

< div class =container > < form method =poststyle =margin：0.7vw 0 0.7％1vw;> < input class =commenttype =text> < input type =submit> < /形式> < 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项目的大小
  
• 正确调整和对齐最后一行的Flex项目

---

< h2> Sidenote

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

  .square {margin：0.7vw 0 0.7％1vw; } 
  

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

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

以下是更多内容：

4.2。弹性项目边距和填充

弹性项目上的边距和填充可以通过以下任一方式解决：

• 它们自己的坐标轴（左/右百分比分辨宽度，顶部/底部分辨高度），或者
  
• 左/右/上/下百分比都与宽度有关）
  
  $ b

  用户代理必须选择这两种行为之一。注意：这种差异很糟糕，但它准确地捕捉了当前的世界状况（实现中没有达成共识，CSSWG中也没有达成共识）。这是CSSWG的意图，浏览器将会收敛在其中的一个行为，在这个时候规范将被修改。

  
  

I'm using flex. There seems to be an unexpected margin difference between two div elements - the third row has a different margin between the divs than the first two rows:

How do I amend the code so that the third row's margin is the same as the first two rows?

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

解决方案

The problem is that your pseudo-element is consuming all available space on the last row.

Yes, this is done to neutralize the effect of justify-content: space-between on two flex items, which causes them to appear on opposite ends...

... but it also kills the proportional spacing that space-between provides when the items fill the row.

Until the flex specification is revised with specific last-row alignment properties, you could implement a hack that solves this problem:

Add invisible flex items after the last real item.

In the example below, I've added seven phantom items to your code.

.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

More information:

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

---

Sidenote

There's a good chance you'll encounter some trouble with this rule:

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

The flexbox specification advises against using percentage margin and padding in a flex container.

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

Here's some more:

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.

这篇关于最后一行的弹性项目之间的边距不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！