Question

我有一个长箱子，里面有4个并排的箱子（divs）。每个内部div为150px x 150px。好吧，我猜是150px加/减边框。在完整的桌面宽度下，我应用了以下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

编辑：我认为Tyler's answer是更好的解决方案。

您的边框将添加到您的框尺寸中，因此为151px，而不是150px。您可以设置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

出现此问题的原因是您的盒子实际上都比您认为的要大。您假设整个框的大小为150px，但事实并非如此-实际上是 150px加边框的大小（如果有的话，还有边框）。这是因为您正在使用默认的box-sizing值box-sizing: content-box;

This article是一本很好的书，它可以解释盒子的大小，但您可以将其放在所有CSS的顶部，以使其更直观地表现：

* {
  box-sizing: border-box;
}

这样，width: 150px;的所有元素总计为150px。

最后...它仍然不起作用。为什么？由于您已将外部框定义为在小屏幕尺寸下为300px宽，因此包括边框。从技术上讲，一旦加上边框，这只会留下299px的内部宽度，不足以容纳2x150px的孩子。

我建议改用flex-basis: 50%;，它应该使盒子占据可用宽度的50％，无论如何，这几乎是您要尝试做的事情。

Answer 4

我认为这只是样式问题，因为您尝试借助.box容器绘制.stock-info形状–更改尺寸后，这会让您头疼–。

您可以尝试从.stock-info删除边框，并向.box对象添加完整边框。我知道这会使框之间的边界略大，但是您可以通过多种方式（视觉上）修复该边界。（例如，添加一点边距，calc（）等...）

Made a simple codepen that you can try

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.stock-info {
  display: flex;
  width: 600px;
  margin: 30px auto;
  font-size: calc(10px + 1.1vw);
}

.box {
  flex: 1;
  flex-basis: 150px;
  height: 150px;
  border: 1px solid #777777;
  /* For example purposes */
  display: flex;
  align-items: center;
  justify-content: center;
}

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

flexbox-以较小的尺寸包装

4 个答案: