我正在尝试实现一个 View ,该 View 将在单个列中包含元素 1-5,在下一列中包含元素 6-10。有没有一种简单的方法可以使用 Flex 来实现此目的,而无需在 Flex 容器上设置显式高度或使用 JQuery?我对顶部的非工作版本和底部的内容有兴趣(但这是使用明确的高度)。
https://jsfiddle.net/h6s9ds5a/
CSS
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.wrapper div {
width: 50%;
}
HTML
<div class="wrapper">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
最佳答案
您可以通过使用两个包装器来做到这一点,但这可能不适合您:https://jsfiddle.net/h6s9ds5a/2/
.wrapper {
display: flex;
}
.wrapper .column {
flex: 1 1 0;
}
.column div {
flex-direction: column;
}
<div class="wrapper">
<div class="column">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<div class="column">
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</div>
关于html - 有没有办法告诉 flexbox 在一定数量的元素之后换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40368465/