Flexbox：当flex-direction：列，flex-wrap：wrap时，宽度计算错误

Flexbox：当flex-direction：列，flex-wrap：wrap时，宽度计算错误

这似乎是“ 柔性盒布局”模块中涉及

flex-direction:column

和的另一个错误

flex-wrap: wrap

。

浏览器似乎无处不在。

在这种特殊情况下，如错误报告中所述：

在我看来，宽度的计算方式就像内部元素是水平（

flex-direction: row

）而不是垂直地布置。

在其他情况下，情况恰恰相反：

• _当flexbox项目以列模式包装时，容器的宽度不会增加

在这两种情况下，当前都没有可解决此问题的flex方法。

对于这个特定问题，一个开发人员提供了一种CSS解决方法，但是我不确定它是否可以在所有浏览器中使用。除非您真的绝望，否则我不建议您这样做：

在某些情况下，您可以通过使用垂直书写模式来解决此问题。

也就是说

flex-direction: column;

，使用代替使用

flex-direction: row; writing-mode:vertical-lr;

。记住

writing-mode: initial;

在flexbox的子代中重置为。