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 ，所以我的内部项目实际上可以放置在多个列。

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

[/ p>]

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

无论如何，使用列而不是行来计算容器的宽度也非常不自然。

看看我的代码中的绿色块。它有一个巨大的，但它不应该有这样。

我期望的是使容器具有小的宽度，因此它不会超过一个

JSFiddle

  .container {display：flex; flex-wrap：wrap; flex-direction：column;背景：＃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 ）而不是垂直布局。 p>

在其他情况下，会发生相反的情况：

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

在这两种情况下，目前没有可用来解决问题的弹性方法。

这个特殊的问题，一个开发人员提供了CSS解决方法，但我不能确定它在所有浏览器中都可以工作。我不会推荐它，除非你真的绝望：

在某些情况下，你可能能够解决这个问题，使用$

垂直书写模式

也就是说，不使用 flex-direction：column; b $ b flex-direction：row; writing-mode：vertical-lr; 。请记住在flexbox的子项中将
重置为 writing-mode：initial; 。

sub> 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屋！