Question

使用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;
}

<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的{{3}}中的另一个错误。

浏览器似乎在这个问题上到处都是。

在这种特殊情况下，如Flexible Box Layout Module中所述：

在我看来，宽度的计算方式就好像内部元素是水平布局的（flex-direction: row）而不是垂直布局。

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

bug report

在这两种情况下，目前没有灵活的方法来解决问题。

对于这个特定的问题，一个开发人员提供了CSS解决方法，但我不确定它是否适用于所有浏览器。除非你真的绝望，否则我不会推荐它：

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

即使用，而不是使用flex-direction: column;   flex-direction: row; writing-mode: vertical-lr;。记得要重置   在弹性箱的子项中writing-mode: initial;。

<子> When flexbox items wrap in column mode, container does not grow its width

错误报告：

Answer 2

您没有预先确定的宽度，因此将其注册为50％宽度字段。通常你在组g1中设置宽度然后flex：1;在第g2组

Answer 3

好。这两个组的父级50%的宽度为.container（一半），默认情况下为width:100%。因此，如果您希望列较小，请将.container缩小，或者将一个组缩小，例如.g1 width :30%

请参阅以下两个示例：

.g1较小

.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;
    width:30%;
}

.g2 {
  background: #0000aa;
  /*flex:1; could also use this*/
}

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

容器更小

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #aa0000;
  height: 100px;
  width:50%;
  
}

.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>

Flexbox：flex-direction时的宽度计算错误：column，flex-wrap：wrap

3 个答案: