浏览器何时对flexbox容器换行？换行判断依据主轴还是交叉轴？

1. 浏览器何时会决定对flexbox容器执行换行操作？ #

• 容器必须设置了flex-wrap: wrap或flex-wrap: wrap-reverse（默认值nowrap不会触发换行）
• 当主轴方向上，所有flex子元素的总初始占用空间（包含flex-basis、内边距、边框、外边距等）超过容器在主轴方向的可用空间时，浏览器就会触发换行。

2. 代码示例中的换行判断依据？ #

先看给出的代码：

#container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  height: 500px;
}

#container div {
  flex-basis: 200px;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Flex容器默认的主轴方向是水平方向（row），此时主轴对应的是容器的宽度（500px），交叉轴对应容器的高度（500px）。子元素的flex-basis: 200px是设置的主轴方向上的初始尺寸，3个子元素的总初始宽度为600px，已经超过容器的主轴宽度500px，因此浏览器判断是否换行时，是依据子元素初始尺寸是否超过主轴宽度。

内容的提问来源于stack exchange，提问作者Cristiano Moraes