html - 使换行 flex 行从新列中的第三行开始

Question

对于我当前的一个客户元素，我被要求展示大约 20 人的团队。当然，它将是一个动态页面，客户端将能够在此列表中添加和删除人员。

每个人都有自己的 div，其中包含个人资料图片、带有姓名的标题和带有简短描述的段落。 人物的 div 具有固定大小。

我想做的是:我为所有 teammember-div 创建了一个包装器，并添加了属性 display: flex; 和 flex-wrap:wrap;。我修改了边距和填充，以便一行可以容纳五个团队成员 div，然后再包含到下一个 div 中。这意味着 10 个人正好等于两整排。第 11 个人现在应该开始第二组 2*5 人，位于第一组的右侧。以下是一些示例:

05 people: 1 row with 5
07 people: 2 rows, first 5, second 2
10 people: 2 rows with 5 each
11 people: 2 rows, first 6, second 5
14 people: 2 rows, first 9, second 5
20 people: 2 rows, with 10 each
23 people: 2 rows, first 13, second 10

第二组 2*5 人应水平扩展包装器，以便两行可滚动。稍后将添加一个脚本来用箭头替换丑陋的滚动条，以左右浏览 2*5 团队成员的集合。

问题:目前，我不知道如何将“第三行”定位在第一行的右侧(依此类推)。

有人对这个问题有想法吗？预先感谢您的提示和建议!

Codepen: http://codepen.io/anon/pen/MKQvjV

Answer 1

不幸的是，使用 flex 无法按您想要的方式切换到新列。您需要稍微更改 HTML 结构才能创建 2 列。这是your CodePen显示结果。

.team {
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 600px;
  background-color: yellow;
}

.member {
  width: 100px;
  height: 200px;
  margin: 10px;
  background-color: red;
}

<div class="team">
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
</div>
<div class="team">
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
  <div class="member"></div>
</div>