如何在带有填充物的柔性盒的3x3网格上跨两列？ [英] How to span two columns on a 3x3 grid with flexbox with paddings?

问题描述

< pre-class =snippet-code-css lang-css prettyprint-override> .page {width：90％margin：auto;}。 display：flex;}。item-container {flex：1; item-container-2x {flex：2;}。item {background-color：＃e7e8e9; height：50px; border：1px solid #ddddd;;

< div class = 页 > < 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; 旁边。我的理解是flex数字加起来。我试图将它们加到3，但在第二行中，两个网格物品之间只有一个边距会影响间距。我不确定这种方法是否好于为网格物品定义可变宽度，但使用flex对我来说似乎很简单。

我认为还存在一个问题，那就是我'使用 16px 的固定填充与 flex：1/2 的变量宽度。我尝试了百分比保证金，但仍然遇到同样的问题。我很难让我的头脑需要使用填充和保证金的组合，甚至可能会有负利润。

感谢您的任何帮助。

在Flex项目中使用 padding 时，Flexbox会稍微复杂一些计算剩余空间的方式，这使得它的工作更加棘手。

在这种情况下，并继续使用 flex-grow 在Flex项目的子项目（项目）上使用 margin 会更简单。它会给父节点上的 padding 做同样的输出，带有非flex子节点。

Stack snippet

.page {width：90％; margin：auto;}。row-container {width：100％; item：container：flex：1;} item-container-2x {flex：2;}。item {background-color：＃e7e8e9; height：50px; border：1px solid #dddddd; margin：16px; / *从.item-container移动并更改为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>  

$ b

---

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

Stack snippet

.page {width：90 ％; margin：auto;}。row-container {width：100％; display：flex;}。item-container {flex：1; padding：16px;}。item-container-2x {flex：2 32px; / *改变* /}。item {background-color：＃e7e8e9; height：50px; border：1px solid #ddddd;;

< div class = 页 > < 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>

$ b

---

在我的另一个答案中，我制作了一个弹出框表格版本，这可能会对您有所帮助。请查看此链接中的Stack snippet - Flexbox示例： //sackoverflow.com/questions/48570109/layout-a-flex-box-similar-to-a-table/48580275#48580275\">摆放类似于桌子的弹性框？

---

作为一个方面说明，并且因为您提到以百分比值进行尝试，会给您带来更多问题，你可以在这里阅读更多关于：

ul>



以下是关于使用 flex-grow 尺寸项目的更多信息：





• flex-grow not按预期大小弹性项目大小





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

The issue here is with the paddings. It causes the grid on the second row to be misaligned.

I'm using flex: 1; for the equal width grid items, and flex: 2; next to one with flex: 1; for the second row. My understanding is that the flex numbers add up. I'm trying to add them up to 3, but in the second row, having only one margin between the two grid items is impacting to spacing. I'm not sure if this approach is better than defining variable widths for the gird items, but using flex seems simple to me.

I think there's also a problem that I'm using fixed paddings of 16px with the variable width withflex: 1/2. I did try percentage margin and still had the same problem. And I'm having a hard time getting my head around needing to use a combination of padding and margin, and maybe even negative margin.

Thanks for any help.

解决方案

When using padding on a flex item, Flexbox has a somewhat more complicated way of calculating the space left, which makes it a little more tricky to make that work.

In this case, and to keep using flex-grow for sizing, using margin on the flex item's child (item) would be simpler. It will give the same output as padding does on a parent, with a non-flex child.

Stack snippet

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

---

If you need, or have, to use padding on the flex items, you need to compensate for the removed item's padding (16px on each side), and add it as an initial flex-basis on the spanned item.

Stack snippet

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

---

In another answer of mine, I made a flex box table version, which might help you further. Check out the "Stack snippet - Flexbox" sample at this link:

• Layout a flex box similar to a table?

---

As a side note, and since you mentioned trying with percent value, that is gonna give you some more issues, which you can read more about here:

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

And here is some more reading about sizing items with flex-grow:

• flex-grow not sizing flex items as expected

这篇关于如何在带有填充物的柔性盒的3x3网格上跨两列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！