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

Question

使用flexbox时遇到问题。

我正在使用容器flex-direction: column; flex-wrap: wrap，因此我的内部物品实际上可以放在多列中。

问题在于浏览器仍将容器的宽度计算 为内部项目宽度的总和 ！

我的容器块应具有较小的宽度（基于内容大小），但实际上很大。

无论如何，使用列而不是行时以这种方式计算容器的宽度也是非常不自然的。

看一下我代码中的绿色方块。它具有巨大的优势，但事实并非如此。此外，当您从容器中取出物品时，它会变小。

我期望容器的宽度较小，因此不会占用超过可用空间的一半。

在最新的Safari和最新的OS X上选中此选项。

.container {

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

  background: #aa0000;

  height: 100px;

}

.group {

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

  align-content: flex-start;

}

.g1 {

  background: #00aa00;

}

.g2 {

  background: #0000aa;

}


<div class="container">

  <div class="group g1">

    <div class="item">Item</div>

    <div class="item">Item</div>

    <div class="item">Item</div>

    <div class="item">Item</div>

    <div class="item">Item</div>

    <div class="item">Item</div>

    <div class="item">Item</div>

  </div>

  <div class="group g2">

    <div class="item">Item</div>

  </div>

</div>

Answer 1

这似乎是“ 柔性盒布局”模块中涉及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的子代中重置为。