CSS flex-wrap属性:理解数学

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 model : box-sizing: content-box,除了width(flex-basis)之外还计算边框和填充.但是,通过将框模型更改为border-box,宽度将包括边框和填充,并且可以避免包装.DEMO

  请注意,如果边框和/或填充足够大,它们仍然可以强制包裹border-box.演示.

  边距将导致包装模型中的包装,因为它们总是在宽度计算之外.

  (阅读有关CSS box-sizing属性的更多信息.)

• 使用绝对长度(如像素)时,换行计算非常简单.简单来说,假设我们有8个弹性项目,每个项目的宽度为100px.这些物品完全适合800px容器.

  包装将在当下发生:

  • 容器缩小到799px.
  • 保证金适用.
  • 在content-box框模型中应用边框或填充.
  • (基本上,由于弹性项目是固定宽度的,只要将1px添加到线条中,或者从容器中移除1px,就会开始包装.)

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

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