如何使用“flex-flow：column wrap”？ [英] How do I use "flex-flow: column wrap"?
问题描述
flex-flow：row wrap 很容易理解。如果没有什么是flexing，它的行为类似于内联元素;它流向右边，直到它不再这样做，这时它创建一个新行。
flex-flow: row wrap is simple enough to understand. If nothing is "flexing", it acts similar to inline elements; It flows to the right until it can't do so anymore, at which point it makes a new row.
flex-flow：column wrap 与 display：flex 是类似的。它向下流，直到它不再流下（ max-width ？），然后启动一个新列。当然，因为父类是 display：flex ，它是一个块级元素，所以该列将中途结束，因为 align -content 默认为 stretch 。我可以很容易地将其改为 flex-start ，使新列与上一列相邻。
flex-flow: column wrap with display: flex is similar. It flows down, until it can't flow down anymore (max-width?), and then starts a new column. Of course, since the parent is display: flex, it's a block-level element, so that column will be halfway over due to the fact that align-content defaults to stretch. I could easily change that to flex-start to make the new column adjacent to the previous.
...但容器仍然太宽。它仍然是一个块，并填充其父的宽度。
...but the container is still too wide. It's still a block, and fills the width of it's parent.
我需要flexbox缩小以适应其列。为什么？我试图在水平滚动的网站中使用flexbox。当然，我可以让孩子们溢出，但溢出往往会破坏东西。
所以我想我需要 flex-flow：column wrap 和 display：inline-flex 。我希望有一个从上到下，从左到右的效果，其中父项没有空格。
I need the flexbox to shrink-to-fit its columns. Why? I'm trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things.
So I figured I needed flex-flow: column wrap with display: inline-flex. I was hoping for a "top to bottom, left to right" effect, where the parent has no empty space.
...然后 此 。在chrome中，父宽度等于子元素宽度的总和，否则，换行是正常的。在firefox中，父对象是全宽，只是增长得更高以适应元素（我不认为firefox支持包装）。在IE11，宽度是正确的，但孩子们只是向下溢出（甚至从身体）。
...and then this happened. In chrome, the parent width is equal to the sum of the widths of the children, but otherwise, wrapping is normal. In firefox, the parent is full width, and just grows taller to accomodate the elements (I don't think firefox supports wrapping). In IE11, the width is correct, but the children just overflow down (even out of the body).
我很困惑。
我在这里做错了什么？我知道flexbox是一个更新的功能，但我不知道这是多么的我的错误与浏览器。
What am I doing wrong here? I understand that flexbox is a more recent feature, but I can't tell how much of this is my fault vs the browser.
通过他们的方式，我测试这在chrome。纯铬解决方案是我的罚款。 （但优雅的全部解决方案总是很好！）
By they way, I'm testing this in chrome. A chrome-only solution is fine by me. (But an elegant catch-all solution is always nice!)
Here's the code for the demo I linked to, in case jsbin is down:
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>
推荐答案
这是一个错误。这里是跟踪器的链接：
This was a bug indeed. Here the links to tracker:
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：column wrap with display：inline-flex。我希望从上到下，从左到右的效果，其中父母没有空格。
I need the flexbox to shrink-to-fit its columns. Why? I'm trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things. So I figured I needed flex-flow: column wrap with display: inline-flex. I was hoping for a "top to bottom, left to right" effect, where the parent has no empty space.
使用 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
这篇关于如何使用“flex-flow：column wrap”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
