Flexbox:当 flex-direction: column, flex-wrap: wrap 时错误的宽度计算 [英] Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap

问题描述

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

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

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

我的容器块应该有一个更小的宽度(基于内容大小)，但它实际上是巨大的.

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

看看我代码中的绿色块.它有一个巨大的，但它不应该有.此外，当您从容器中取出物品时，它会变小.

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

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

JSFiddle

.container {显示:弹性；flex-wrap: 包裹;弹性方向:列；背景:#aa0000；高度:100px；}.团体 {显示:弹性；flex-wrap: 包裹;弹性方向:列；对齐内容:flex-start；}.g1 {背景:#00aa00；}.g2 {背景:#0000aa；}

<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 class="group g2"><div class="item">Item</div>

解决方案

这似乎是 Flexible Box Layout Module 涉及flex-direction: column 和 flex-wrap: wrap.

浏览器似乎在这个问题上无处不在.

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

<块引用>

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

在其他情况下，则相反:

• 当 flexbox 项目以列模式换行时，容器不会增加其宽度

在这两种情况下，目前都没有解决问题的 flex 方法.

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

<块引用>

在某些情况下，您可以通过使用垂直书写模式.

即不使用flex-direction: column;，而是使用flex-direction: row;写作模式:垂直-lr;.记得重置到 writing-mode: initial; 在 flexbox 的孩子中.

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

错误报告:

• https://bugs.chromium.org/p/chromium/issues/detail?id=247963
• https://bugs.chromium.org/p/chromium/issues/detail?id=507397
• https://bugzilla.mozilla.org/show_bug.cgi?id=995020
• https://codereview.chromium.org/289903007
• https://src.chromium.org/viewvc/blink?view=revision&revision=178925

I ran into a problem when using flexbox.

I'm using a container with flex-direction: column; flex-wrap: wrap, so my inner items can actually be placed in multiple columns.

The problem is that the browser still calculates the container's width as a sum of inner items' widths!

My container block should have a smaller width (based on content size), but it is actually huge.

Anyway, it's also very unnatural to calculate container's width this way when using columns, not rows.

Take a look at the green block in my code. It has a huge with, but it isn't supposed to have so. Also, it gets smaller as you remove an item from the container.

What I expect is to have the container with small width, so it wouldn't take more than a half of the available space.

Checked this on the latest Safari and Chrome on the latest OS X.

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>

解决方案

This appears to be yet another bug in the Flexible Box Layout Module involving flex-direction: column and flex-wrap: wrap.

Browsers seem to be all over the place on this issue.

In this particular case, as stated in a bug report:

It seems to me that the width is calculated as if the inside elements were laid out horizontally (flex-direction: row) instead of vertically.

In other cases, the opposite occurs:

• When flexbox items wrap in column mode, container does not grow its width

In both cases, there are currently no flex methods to resolve the problem.

For this particular question, one developer offers a CSS workaround, but I'm not sure it works in all browsers. I wouldn't recommend it unless you're truly desperate:

In some instances, you may be able to workaround this issue by using vertical writing mode.

That is, instead of using flex-direction: column;, use flex-direction: row; writing-mode: vertical-lr;. Remember to reset to writing-mode: initial; in the children of the flexbox.

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

Bug reports:

• https://bugs.chromium.org/p/chromium/issues/detail?id=247963
• https://bugs.chromium.org/p/chromium/issues/detail?id=507397
• https://bugzilla.mozilla.org/show_bug.cgi?id=995020
• https://codereview.chromium.org/289903007
• https://src.chromium.org/viewvc/blink?view=revision&revision=178925

这篇关于Flexbox:当 flex-direction: column, flex-wrap: wrap 时错误的宽度计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！