如何在css flexbox中打破行（“清除”元素）答案

【问题标题】：How to break row ("clear" element) in css flexbox如何在css flexbox中打破行（“清除”元素）
【发布时间】：2015-05-30 14:32:40
【问题描述】：

是否可以“清除”“display: flex”容器中的元素？

我想实现这样的目标：

在大屏幕上连续显示 20 个元素
在较小的屏幕上连续显示 10 个元素
在小屏幕上连续 5 个元素

使用浮点数，我可以在每个第 5 个元素之后通过适当的媒体查询“清除”...

【问题讨论】：

为什么不直接调整弹性容器的大小以适应每行项目的数量并让它们有机地包装？

标签： css flexbox

【解决方案1】：

可以在容器中添加flex-wrap: wrap;，并设置里面元素的宽度。

那么您应该可以控制浮动将停止哪些元素。

演示：http://codepen.io/imohkay/pen/gpard

【讨论】：

啊该死的，我不小心投了反对票，现在除非您编辑答案，否则我不会更改它...如果您愿意，请继续编辑一下，我会回来改变我的投票！
@peterjmag 刚刚经过并看到了。我清理了答案，你现在可以给他投票了。

【解决方案2】：

您可以尝试为容器内的元素添加一个带百分比的宽度，以及属性flex-wrap: wrap。然后，通过媒体查询，您可以在给定断点的情况下操纵所述元素的宽度。这是一个例子：

.container {
 display: flex;
 flex-wrap: wrap;
}

.element {
  width: calc(25% - 20px);
  height: 100px;
  margin: 10px;
  background-color: red;
}

@media(max-width: 800px) {
  .element {
    width: calc(50% - 20px);
  }
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

【讨论】：

【解决方案3】：

正如@BoltClock 建议的那样，您可以“调整弹性容器的大小以适应每行项目的数量并让它们有机地包装”。

如果您想真正清除一条类似于使用浮动的线，您可以在要清除的方向上设置边距。

element{
  margin-right: calc( 100% - widthOfelement);
}

*{
  box-sizing: border-box;
}

.parent{
  display: flex;
  width: 600px;
  height: auto;
  flex-wrap: wrap;
  border: 1px grey dashed;   
}

.child{
  width: 100px;
  height: 50px;
  border: 1px orangered solid;
  background-color: skyblue;
}

/*add "clear" after first child*/
.child:nth-child(1){
  margin-right: calc(100% - 100px);
}

/*add "clear" after third child*/
.child:nth-child(3){
  margin-right: calc(100% - 200px);
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

【讨论】：