Question

在以下示例中，我在flex-basis属性中使用百分比值。是什么让浏览器决定何时开始破坏行？

body {
  margin: 100px;
}

* {
 box-sizing: border-box;
}
section {
  display: flex;
  flex-wrap: wrap;
}
div {
  border: 1px solid;
  padding: 1rem;
  flex: 1 0 10%;
}

<section>

  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>

Answer 1

首先，浏览器确定容器的宽度。

注意：对于这些示例，我将假设为flex-direction: row，但同样的逻辑适用于column。

假设宽度的计算值为800px。

您有8个弹性项目，宽度为10％。所以每个项目都是80px。

注意：

由于您使用的是百分比长度，因此即使使用flex-wrap: wrap，这些项也不会换行。为什么？因为10％是相对于容器宽度的，并且当父母收缩时，孩子也会收缩。 DEMO
如果您告诉flex项目尽可能多地增长（flex-grow: 1），即使使用flex-wrap: wrap，它们仍然不会换行，原因与上述相同。 DEMO
但是，一旦您将border，padding或margin引入等式，这些长度会增加10％，并且灵活项目的行数将超过宽度容器。现在这些物品将会包裹起来。
边框和填充强制换行的原因是默认的框模型：box-sizing: content-box，它除了宽度（flex-basis）之外还计算边框和填充。但是，通过将框模型更改为border-box，宽度将包括边框和填充，并且可以避免包装。 DEMO

请注意，如果边框和/或填充足够大，即使使用border-box，它们仍可能强制换行。 DEMO

边距会导致包装模型中的包装，因为它们总是在宽度计算之外。

（Read more about the CSS box-sizing property.）
使用绝对长度（如像素）时，换行计算非常简单。简单来说，假设我们有8个弹性项目，每个项目的宽度为100px。这些物品完全适合800px容器。

包装将在当下发生：
- 容器缩小到799px。
- 适用保证金。
- 在content-box框模型中应用边框或填充。
- （基本上，由于弹性项目是固定宽度的，只要将1px添加到线条中，或者从容器中移除1px，就会开始包裹。）

这是包装在柔性容器中的一般说明。还有其他因素可以影响断点，例如flex-shrink。

上面的演示在Chrome中进行了测试。其他浏览器中的行为可能会有所不同。

Answer 2

在上面的示例中，每个div的总宽度是其边框，填充和内容的总和。

每个div的每边都有一个1px的边框，每边有一个1rem的填充，其宽度是flex声明中设置的容器宽度的10％。

所以它的总宽度= 10％+ 2rem + 2px。

当然，浏览器会尝试尽可能多地将div放在一行上。当它不再适合时，它将开始一个新的线。

CSS flex-wrap属性：理解数学

2 个答案: