有没有办法告诉flexbox在一定数量的元素后包装列?

时间:2016-11-01 20:52:37

标签: html css css3 flexbox

我正在尝试实现一个视图,它将在单个列中包含项目1-5,在下一列中包含项目6-10。有没有一种简单的方法来实现这一点使用flex WITHOUT在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>

2 个答案:

答案 0 :(得分:1)

你可以这样做,使用两个包装器,但这可能不适合你: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>

答案 1 :(得分:1)

你需要的是两个列的包装

&#13;
&#13;
.wrapper {
  display: flex;
}
.wrapper div {
  width: 50%;
}
&#13;
<div class="wrapper">
  <div class="col1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div class="col2">
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>      
</div>
&#13;
&#13;
&#13;