我如何使用"flex-flow:column wrap"？
精简版
使用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.我希望有一个"从上到下,从左到右"的效果,父母没有空的空间.
......然后发生了这件事.在chrome中,父宽度等于子宽度的总和,但否则,换行是正常的.在firefox中,父级是全宽的,只是变得更高以容纳元素(我不认为firefox支持包装).在IE11中,宽度是正确的,但是孩子们只是向下溢出(甚至是身体外).
我很困惑.
我在这做错了什么？我知道flexbox是一个更新的功能,但我不知道这与浏览器有多大关系.
按照他们的方式,我用chrome测试它.我只使用纯铬解决方案.(但优雅的解决方案总是很好!)
这是我链接到的演示的代码,以防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>如果您不知道每个项目的高度或您将拥有多少项目，一个更灵活的解决方案是：
.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，如果他们不顶端对齐。
- 我会尽量把你的指责和反对票放在心上。在我的辩护中，我花了太多时间查看有关 flex 的 SO 页面，而我需要的是列数，并且我正在努力帮助他人获得更好的体验。 (3认同)
- @Marcus 无论如何，这个答案让我避免了在解决我试图解决的问题时走上错误道路的很多麻烦。 (2认同)
这确实是一个错误.这里是跟踪器的链接:
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
小智 0
我认为 Firefox 并不完全支持“column-wrap”。正如你所说，你在 Chrome 中需要这个，在这种情况下你可以看到 Chris Coyier 做了什么：添加 webkit 前缀 --> http://css-tricks.com/snippets/css/a-guide-to-flexbox /