具有 flexbox 网格的列中的边距

Question

我有一个关于 flexbox 网格的简单问题，但我无法解决

我有这个代码：

<div class="grid-items row">
<div class="item item-50 col-xs-6">
    <div class="text">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
</div>

<div class="item col-xs-3">
    <h2>Lorem Ipsum is simply dummy text</h2>
</div>
<div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
</div>

三列，每列的列间距为30px，第一列的宽度为50%，第二列和第三列的宽度为25%。显然，边距导致第三列溢出。是否可以在不改变宽度的情况下纠正这个问题？这是必要的，因为列有背景。

在这个练习中我不能修改 HTML，只能添加类...

列类的属性如下：

.col-xs-3 {
 flex-basis: 25%;
 max-width: 25%;
 }

Answer 1

我认为您的问题可以使用box-sizing 定义来解决。

你可以在下面的例子中检查它是如何工作的。

这是两者之间差异的示例。你可以查看更多关于 box-sizing here.

#content-box,
#border-box {
  width: 300px;
  height: 100px;
  padding: 30px;
}

#content-box {
  background: red;
  color: white;
  box-sizing: content-box;
}

#border-box {
  background: green;
  color: white;
  box-sizing: border-box;
}

<div id="content-box">I am a 300px wide div using content-box.</div>

<div id="border-box">I am also a 300px wide div, but I am using border-box.</div>

Answer 2

不清楚你是用bootstrap还是自制的class。

使用纯CSS flex，如果要添加margin，不要使用flex-basis，而是使用flex-grow。它也适用于任何 box-sizing 值。

.row {display:flex;}

.item {border:solid;margin:20px;}
.col-xs-6 {flex:6;}/* shorthand reduce to minimal */
.col-xs-3 {flex:3;}

<div class="grid-items row">
<div class="item item-50 col-xs-6">
    <div class="text">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
</div>

<div class="item col-xs-3">
    <h2>Lorem Ipsum is simply dummy text</h2>
</div>
<div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
</div>

对于断点，您可以在媒体查询中使用min-width:90% 来填充包括边距在内的整行。 免责声明：这部分需要澄清吗？如果是这样，请将其添加到您的问题中；) 下面的示例

.row {
  display: flex;  
  gap: 30px;  /* this can be used instead margin on the child, see caniuse.com where it works 
 only avalaible in FF at this time  in a flex box*/
}

.item {
  border: solid;
}

.col-xs-6 {
  flex: 6
}

.col-xs-3 {
  flex: 3
}

@media screen and (max-width:500px) {/* play the snippet in fullpage to resize window */
  .row {
    flex-wrap: wrap;
  }
  .item {
    min-width: 90%;/* flex-grow will do the next 10% */
  }
}

<div class="grid-items row">
  <div class="item item-50 col-xs-6">
    <div class="text">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
  </div>

  <div class="item col-xs-3 mlr-30px">
    <h2>Lorem Ipsum is simply dummy text</h2>
  </div>
  <div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
  </div>

Answer 3

在我看来，您只需将flex-shrink: 1 添加到所有这些列类（如.col-xs-3）。这将允许列缩小一点，并将所有内容都放入给定的宽度而不会溢出。