Question

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

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

我想要做的是：我为所有teammember-div创建了一个包装器，并添加了属性display: flex;和flex-wrap: wrap;。我修改了边距和填充，以便一行包含五个teammember-div，然后再包含在下一个中。这意味着10个人恰好相当于两个完整的行。第十一个人现在应该开始第二组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

也许你可以尝试数量查询并为你提到的这些数字创建规则。

了解数量查询的一个很好的链接在A List Apart：quantity queries 有人甚至建立了一个帮助完成任务的构建器：quantityqueries.com

修改

现在我看到了你的代码。而不是justify-content：center，使用justify-content：flex-end;这将对齐您行中的项目。

Answer 2

很遗憾，使用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>

使包装flex-row开始在新列中的第三行

2 个答案: