html - 如何修复百分比宽度列 1px 间隙的显示 flex ？

Question

在特定宽度显示的 flex 列上，百分比宽度留出 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

该问题是其他 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 的问题)

堆栈片段

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 是 3 中的 1 和 3 中的 2，因此它们均等地增长和收缩。

注意，像这样使用它很重要，其中 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>