短版

Question

短版

使用flex-flow: column wrap和display: inline-flex时，它不像inline-block那样收缩包装：

(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('flex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();
(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('failex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();

#flexdesc {position: absolute; top: 25px;}
#flex {
  top: 50px;
  position: absolute;
  display: inline-flex;
  flex-flow: row wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  max-width: 180px;
  align-content: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-origin: top left;
}

#flex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
  top: 300px;
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 200px;
  align-content: flex-start;
  transform-origin: top left;
}

#failex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="flexdesc">What I expect it to do</div>
  <div id="flex">
    <p>foo</p>
    
    <!-- add extra "<p>foo</p>" here. -->
  </div>
  <div id="failexdesc">What it does</div>
  <div id="failex">
    <p>foo</p>
  </div>
</body>
</html>

注意每个弹性容器的大小如何变化（或不变！）

我想要这种行为，因为我想将这些元素并排放置在一个水平滚动的网站上。

为什么不收缩？如何使其收缩？

<小时/>

原始问题

flex-flow: row wrap很容易理解。如果没有任何“弯曲”，它的行为类似于内联元素;它向右流动直到它不能再这样做，此时它会形成一个新的行。

与flex-flow: column wrap的

display: flex相似。它向下流动，直到它不再流下来（max-width？），然后开始一个新列。当然，由于父级是display: flex，因此它是一个块级元素，因此由于align-content默认为stretch这一列，该列将会中途停止。我可以轻松地将其更改为flex-start，以使新列与前一列相邻。

...但容器仍然太宽。它仍然是一个块，并填充它的父级宽度。

我需要让flexbox缩小以适应其列。为什么？我正在尝试在水平滚动网站中使用flexbox。当然，我可以让孩子们满溢，但那种溢出往往会让......破碎。所以我认为我需要flex-flow: column wrap display: inline-flex。我希望有一个“从上到下，从左到右”的效果，父母没有空位。

......然后this发生了。在chrome中，父宽度等于子宽度的总和，但否则，换行是正常的。在firefox中，父级是全宽的，只是变得更高以容纳元素（我不认为firefox支持包装）。在IE11中，宽度是正确的，但是孩子们只是向下溢出（甚至是身体外）。

我很困惑。

我在这里做错了什么？我知道flexbox是一个更新的功能，但我不知道这与浏览器有多大关系。

按照他们的方式，我用chrome测试它。我只使用纯铬解决方案。（但优雅的解决方案总是很好！）

这是the code for the demo I linked to，以防jsbin关闭：

var ascending = true;
   setInterval(function() {
     var parent = document.getElementById('flex');
     if (ascending) {
       var child = document.createElement('p');
       child.innerHTML = "f";
       parent.appendChild(child);
     } else {
       parent.removeChild(parent.children[0]);
     }
     if (parent.children.length <= 1) ascending = true;
     if (parent.children.length >= 30) ascending = false;
   }, 200);

#flex {
  display: inline-flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  align-content: flex-start;
}
p {
  margin: 0;
  outline: 1px solid black;
  width: 10px;
}
body {
  height: 150px;
  width: 300px;
  outline: 1px dashed black
}

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>

Answer 1

这确实是一个错误。这里是跟踪器的链接：

https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397

OP想要：

我需要flexbox缩小以适应其列。为什么？我正在尝试在水平滚动网站中使用flexbox。当然，我可以让孩子们满溢，但那种溢出往往会让......破碎。所以我想我需要flex-flow：带有display：inline-flex的列包装。我希望有一个“从上到下，从左到右”的效果，父母没有空位。

我们可以使用flex-flow: column wrap;，align-content: flex-start;和固定高度包装器来实现它。

http://output.jsbin.com/qixuxiduxe/1

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

更新了小提琴：http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

Answer 2

我遇到了类似的问题，我遇到了

div {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
}

但是子项目没有包装，它只有一列。解决方案是给 div max-height 属性然后包裹物品。

Answer 3

如果您不知道每件物品的高度或将要拥有的物品数量，则更灵活的解决方案是：

.parent {
  column-count: 4
}
.child {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

如果margin-top中的.child:first-child与顶部不对齐，您可能还需要调整它们。

Answer 4

可能会迟到但我认为＆＃39; column-wrap＆＃39; Firefox不完全支持。正如你所说，你在Chrome中需要这个，在这种情况下你可以看到Chris Coyier做了什么：添加webkit前缀 - ＆gt; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望不迟到：/

我如何使用“flex-flow：column wrap”？

短版

原始问题

4 个答案: