如何使用百分比宽度列 1px 间隙修复显示 flex？

Question

在具有百分比宽度的特定宽度显示弹性列上留下一个 1px 的间隙 http://prntscr.com/gyhatt

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  padding: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  background: red;
}

.g {
  padding: 30px;
}

.grid-33 {
  width: 33.3333%;
}

.grid-50 {
  width: 50%;
}

.grid-66 {
  width: 66.6666%;
}

.grid-100 {
  width: 100%;
}

.white {
  background: #fff;
}

.yellow {
  background: #ffb401;
}

<div class="wrapper">
  <div class="container">
    <div class="g  white grid-66">
      <p>Test</p>
    </div>
    <div class="g yellow grid-33">
      <p>Test</p>
    </div>
  </div>
</div>

fiddle

我已经尝试将 grid-33 设置为 33.3334%，但它不起作用，而且它没有用，因为我正在使用框架并且无法“轻推”特定列来解决实际的布局问题。我希望 flex box 的尺寸会像显示表一样，其中 px 被四舍五入，但似乎情况并非如此。

感谢任何帮助。

Answer 1

如果您愿意，您可以保留width 属性并使用flex-grow 它是flex 的属性：

在你的情况下，我尝试使用 -

.grid-33 {
  flex-grow: 3;
  -webkit-flex-grow: 3;
}

.grid-66 {
  flex-grow: 7;
  -webkit-flex-grow: 7;
}

在我看来，如果有任何更改，您可以使用flex-grow 值对其进行调整。

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  padding: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  background: red;
}

.g {
  padding: 30px;
}

.grid-33 {
  flex-grow: 3;
  -webkit-flex-grow: 3;
}

.grid-50 {
  width: 50%;
}

.grid-66 {
  flex-grow: 7;
  -webkit-flex-grow: 7;
}

.grid-100 {
  width: 100%;
}

.white {
  background: #fff;
}

.yellow {
  background: #ffb401;
}

<div class="wrapper">
  <div class="container">
    <div class="g  white grid-66">
      <p>Test</p>
    </div>
    <div class="g yellow grid-33">
      <p>Test</p>
    </div>
  </div>
</div>

Answer 2

该问题是 Chrome 和 Edge 中存在的错误（或舍入问题），但 Firefox 没有。

• https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
• http://cruft.io/posts/percentage-calculations-in-ie/
• https://johnresig.com/blog/sub-pixel-problems-in-css/

---

我找到了 2 种解决方法，一种是您将 justify-content: space-between; 添加到 flex 容器中（但在某些屏幕宽度上，Chrome 似乎仍然存在 1px 问题）

堆栈sn-p

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  padding: 30px;
}

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

.g {
  padding: 30px;
}

.grid-33 {
  width: 33.3333%;
}

.grid-50 {
  width: 50%;
}

.grid-66 {
  width: 66.6666%;
}

.grid-100 {
  width: 100%;
}

.white {
  background: #fff;
}

.yellow {
  background: #ffb401;
}

<div class="wrapper">
  <div class="container">
    <div class="g  white grid-66">
      <p>Test</p>
    </div>
    <div class="g yellow grid-33">
      <p>Test</p>
    </div>
  </div>
</div>

---

另一种是使用flex: 1 1 0/flex: 2 2 0，其中flex-grow/flex-shrink 是 1 of 3 和 2 of 3，因此它们的增长和收缩均等。

注意，像这样使用它很重要，其中它的flex-basis 设置为 0，否则在可用空间在项目之间分配之前将考虑内容。

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  padding: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  background: red;
}

.g {
  padding: 30px;
}

.grid-33 {
  width: 33.3333%;
  flex: 1 1 0;
}

.grid-50 {
  width: 50%;
}

.grid-66 {
  width: 66.6666%;
  flex: 2 2 0;
}

.grid-100 {
  width: 100%;
}

.white {
  background: #fff;
}

.yellow {
  background: #ffb401;
}

<div class="wrapper">
  <div class="container">
    <div class="g  white grid-66">
      <p>Test</p>
    </div>
    <div class="g yellow grid-33">
      <p>Test</p>
    </div>
  </div>
</div>