Question

是否可以＆＃34;清除＆＃34; ＆＃34;显示中的元素：flex＆＃34;容器

我想实现这样的目标：

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

随着花车，我可以清楚地＃34;在每个第5个元素之后进行适当的媒体查询...

Answer 1

您可以将flex-wrap: wrap;添加到容器中，并设置内部元素的宽度。

然后你应该让控制决定浮动将停止的元素。

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

Answer 2

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

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

Answer 3

正如@ BoltClock建议您可以“调整Flex容器的大小以容纳每行上的项目数量并让它们有机地包装”。

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

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中打破行（＆＃34;清除＆＃34;元素）

3 个答案: