伸缩框：伸缩方向：列，伸缩包装：换行时宽度计算错误

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

以上是 伸缩框：伸缩方向：列，伸缩包装：换行时宽度计算错误 的全部内容， 来源链接： utcz.com/qa/405751.html

回到顶部