小尺寸柔性包装盒

Question

我有一个很长的盒子，里面有4个盒子(Div)。每个内部div为150 px150 is。嗯，我想是150便士加/减去边框。在全桌面宽度，我应用了以下css：

.stock-info {
  display: flex;
  width: 600px;
  margin: 30px auto;
  font-size: calc(10px + 1.1vw);
  border-left: 1px solid #777777;
  border-top: 1px solid #777777;
}

.stock-info .box {
  flex: 1;
  margin: 0;
  padding: 0;
  height: 150px;
  border-right: 1px solid #777777;
  border-bottom: 1px solid #777777;
}

​

​

现在，当窗口的宽度缩小时，我希望这些盒子保持相同的高度和宽度。也许我需要把它变成flex-basis: 150px;而不是flex:1。然后，当屏幕变得太小，无法处理所有4个盒子，我希望它下降到2x2，并一直停留在那里。我从来不想让一个盒子一个人在一排。

这就是我尝试过的更小的维度。它切换到一个列，边框就会被冲洗。我做这样的边框是基于我在网上找到的另一个建议，以避免双重的内部边界。也许还有更好的方法来做到这一点。

 @media screen and (max-width: 650px) {
  .stock-info {
    width: 300px;
    flex-wrap: wrap;
  }
  .stock-info .box {
    flex-basis: 150px;
  }
}

​

​

Answer 1

你的盒子正在堆叠，因为你的边框增加了你的盒子的宽度。

您可以将box-sizing: border-box添加到您的.box类中，以便向内而不是向外应用宽度。

注意:对于新的网站，，您可能希望从box-sizing设置为border-box开始。这使得处理元素的大小变得容易得多，并且通常消除了在布局内容时可能遇到的一些陷阱。

​

.stock-info {
  display: flex;
  width: 600px;
  margin: 30px auto;
  font-size: calc(10px + 1.1vw);
  border-left: 1px solid #777777;
  border-top: 1px solid #777777;
}

.stock-info .box {
  flex: 1;
  margin: 0;
  padding: 0;
  height: 150px;
  border-right: 1px solid #777777;
  border-bottom: 1px solid #777777;
  box-sizing: border-box;
}

 @media screen and (max-width: 650px) {
  .stock-info {
    width: 300px;
    flex-wrap: wrap;
  }
  .stock-info .box {
    flex-basis: 150px;
  }
}

<div class="stock-info">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

​

Answer 2

编辑:我认为泰勒的回答是更好的解决方案。

您的边框将被添加到您的框大小，因此它们是151 be，而不是150。您可以将max-width: calc(50% - 1px)设置为边界的帐户，如下所示：

​

.stock-info {
  display: flex;
  width: 600px;
  margin: 30px auto;
  font-size: calc(10px + 1.1vw);
  border-left: 1px solid #777777;
  border-top: 1px solid #777777;
}

.stock-info .box {
  flex: 1;
  margin: 0;
  padding: 0;
  height: 150px;
  border-right: 1px solid #777777;
  border-bottom: 1px solid #777777;
}

.stock-info {
  width: 300px;
  flex-wrap: wrap;
 }
  
 .stock-info .box {
  flex-basis: 150px;
  max-width: calc(50% - 1px);
 }

<div class="stock-info">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

​

Answer 3

你之所以有这个问题，是因为你的盒子实际上都比你想象的要大。假设150 if是整个框的大小，但这不是真的--它实际上是150 if加上边框的大小(如果有的话，还有填充)。这是因为您使用的是默认的box-sizing值box-sizing: content-box;

这篇文章是一个很好的解释框大小的读物--但是您可以通过将它放在所有CSS的顶部，将它设置为一种更直观的方式：

* {
  box-sizing: border-box;
}

这样，width: 150px;的所有元素总数将达到150%。

终于..。但还是没用的。为什么？因为您已经将外部框定义为300 at宽的小屏幕大小，包括边框。从技术上讲，这只留下299 of的内部宽度，一旦你考虑到边框，这是不足以适合你的2x150 of的孩子。

我建议使用flex-basis: 50%;，这应该会使盒子占用50%的可用宽度，这基本上就是你想要做的事情。