Flexbox：当 flex-direction: column, flex-wrap: wrap 时错误的宽度计算

Question

Flexbox：当 flex-direction: column, flex-wrap: wrap 时错误的宽度计算

Kir*_*voy 1 html css flexbox

我在使用 flexbox 时遇到了问题。

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

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

我的容器块应该有一个较小的宽度（基于内容大小），但它实际上是巨大的。

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

看看我的代码中的绿色块。它有一个巨大的，但它不应该有。此外，当您从容器中移除项目时，它会变小。

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

在最新的 OS X 上的最新 Safari 和 Chrome 上进行了检查。

JSFiddle

.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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*l_B 5

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

_{https://bugs.chromium.org/p/chromium/issues/detail?id=507397}

错误报告：

归档时间：	9 年，3 月前
查看次数：	4304 次
最近记录：	9 年，3 月前