使包装柔性行开始新列中的第三行

对于我当前的客户项目，我被要求展示约20人的团队。当然，这将是一个动态页面，客户可以从这个列表中添加和删除人员。使包装柔性行开始新列中的第三行

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

我想要做的是这样的：我为所有teammember-div创建了一个包装，并添加了属性display: flex;和flex-wrap: wrap;。我修改了边距和填充，以便一行可以容纳五个teammember-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

来源

2016-01-23 Jonathan Weber

你可以用你的代码创建一个jsfiddle或codepen吗？ –

当然，请给我第二个... –

您能够更改HTML结构吗？ –

不幸的是，打破新专栏不会像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>

来源

2016-01-23 11:09:52

谢谢！是的，这显然会起作用。但我认为会有一个更“动态”的解决方案，以便稍后对其做出响应（例如，使一行包含两个人用于小屏幕）... 无论如何，谢谢！我想我会这样做。 –

这可以做出反应仍然。例如，在较小的屏幕上，列会叠加，'flex'儿童可能占用50％，因此每行会有2个。但为了让它按照你想要的方式分解成列，你需要像这样构造它。 –

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

一个很好的链接，了解量查询是在列表除了：quantity queries ，有人甚至构建一个建设者的任务就是要帮助：quantityqueries.com

编辑：

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

来源

2016-01-23 10:53:49 Drala

这是一个很好的起点，我没有想到数量查询。但即使如此;如何告诉flex在特定元素之后启动“新列”？ –

@JonathanWeber你的意思是“新的一排”？你无法真正通过flex与浏览器进行交互。有一些规则就像是先发后发或后发后发，但是他们没有得到很好的支持。我看到的唯一方法是限制每行的宽度。 – Drala

使包装柔性行开始新列中的第三行

回答

相关问题