如何使用带有填充的 flexbox 在 3x3 网格上跨越两列？答案

【问题标题】：How to span two columns on a 3x3 grid with flexbox with paddings?如何使用带有填充的 flexbox 在 3x3 网格上跨越两列？
【发布时间】：2018-02-14 05:13:09
【问题描述】：

.page {
  width: 90% margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
  padding: 16px;
}

.item-container-2x {
  flex: 2;
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

这里的问题在于填充。它会导致第二行的网格错位。

我将flex: 1; 用于等宽网格项目，flex: 2; 在旁边使用flex: 1; 用于第二行。我的理解是弹性数字加起来。我试图将它们添加到 3，但在第二行中，两个网格项目之间只有一个边距会影响间距。我不确定这种方法是否比为网格项目定义可变宽度更好，但使用 flex 对我来说似乎很简单。

我认为还有一个问题是我使用16px 的固定填充和flex: 1/2 的可变宽度。我确实尝试了百分比保证金，但仍然遇到同样的问题。而且我很难理解需要使用填充和边距的组合，甚至可能是负边距。

感谢您的帮助。

【问题讨论】：

可能重复：stackoverflow.com/q/34644807/3597276
CSS Grid 排水沟解决方案：stackoverflow.com/a/48755146/3597276
@Michael_B 为什么你不关闭它:)
@TemaniAfif，因为我不能 100% 确定这个问题是骗人的。审查足以使关联，但不足以关闭。随意继续。
@TemaniAfif 在那个欺骗性的速记 flex-grow 被使用，它给出了另一个结果，而不是速记 flex 会，因此它并不完全相同。这里的问题是由 Flexbox 计算 剩余空间 在使用填充的弹性项目上更复杂的方法引起的。

标签： html css flexbox

【解决方案1】：

当在弹性项目上使用padding 时，弹性盒计算剩余空间的方法有点复杂，这使得它的工作变得更加棘手。

在这种情况下，为了继续使用 flex-grow 来调整大小，在弹性项目的子项 (item) 上使用 margin 会更简单。它将提供与 padding 在具有非弹性子代的父代上相同的输出。

堆栈sn-p

.page {
  width: 90%;
  margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
}

.item-container-2x {
  flex: 2;
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
  margin: 16px;                                     /*  moved from ".item-container" and changed to "margin"  */
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

如果您需要或必须在弹性项目上使用padding，您需要补偿已移除项目的 内边距（每边16px），并将其添加为初始flex-basis 在 spanned 项目上。

堆栈sn-p

.page {
  width: 90%;
  margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
  padding: 16px;
}

.item-container-2x {
  flex: 2 32px;                                       /*  changed  */
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

在我的另一个答案中，我制作了一个 flex box table 版本，这可能会对您有所帮助。在此链接中查看 “Stack sn-p - Flexbox” 示例：

Layout a flex box similar to a table?

作为旁注，由于您提到尝试使用百分比值，这会给您带来更多问题，您可以在此处阅读更多信息：

Why doesn't percentage padding / margin work on flex items in Firefox?

这里有更多关于使用flex-grow 调整项目大小的内容：

flex-grow not sizing flex items as expected

【讨论】：