当div
的高度与.container
包装的底部相遇时,我试图让.resize
元素水平分布。
当我拖动窗口缩小.container
的高度时,我想在.resize
的底部与.container
包装的底部相遇时缩小.resize
包装,以便元素flex-wrap
和水平分布与动态高度成比例.container
。
body {
position: absolute;
overflow: hidden;
display: flex;
flex-direction: column;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container {
flex: 1;
border: 2px solid blue;
}
.resize {
display: flex;
height: auto;
flex-direction: column;
flex-wrap: wrap;
border: 2px solid #f00;
}
.resize > div {
border: 2px solid #555;
flex: 0 0 auto;
background-color: #ccc;
height: 100px;
width: 100px;
}
<div class="container">
<div class="resize">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
我不认为flexbox可以做到这一点。
您想要的是行方向。 (在这个demo水平收缩窗口)
但它在列方向上不起作用。 (在这个demo垂直收缩窗口)。
这可能是column wrap
模式下flexbox的另一个缺陷。以下是其他几个: