如何在 css flexbox 中打断行（"clear" 元素）

Question

是否可以在 "display: flex" 容器中添加 "clear" 元素？

我想实现这样的目标：

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

有了花车，我可以 "clear" 在每个第 5 个元素之后使用适当的媒体查询...

Answer 1

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

那么你应该有控制权来决定浮动将停止的元素。

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

Answer 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>

Answer 3

正如@BoltClock 所建议的，您可以"resize your flex container to accommodate the number of items on each line and let them wrap organically"。

如果你想像使用浮动一样真正清除一行，你可以在你想清除的方向设置边距。

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>

如何在 css flexbox 中打断行（"clear" 元素）

How to break row ("clear" element) in css flexbox

css

flexbox