【发布时间】：2013-09-11 05:30:09
【问题描述】：
短版
当使用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 容器的大小如何变化（或不变！）
我想要这种行为，因为我想将这些元素并排放置以用于水平滚动的网站。
为什么不收缩包装？如何使其收缩包装？
原始问题
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 进行测试。我可以使用仅限 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>【问题讨论】：
-
IE10 支持来自 older specification 的前缀属性。问题似乎源于将 inline-flex 与列方向一起使用（如果切换到行方向，它会缩小以适合您的预期）。 Flexbox 有点复杂，所以你需要提供更多的标记来获得一个好的解决方案。
-
这可能是我用来更好地了解 Flexbox 的最佳资源。它可能有一个答案给你。 flexbox.io
-
这可以提供一个解释：stackoverflow.com/q/39095473/3597276
-
感谢如此匹配，我才得到这个形状
-
那个动图