是否可以“清除”"display: flex“容器中的元素?
我想要达到这样的效果:
有了浮动,我可以用适当的媒体查询在每5个元素后“清除”…
发布于 2018-06-01 04:46:21
正如@ 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>
发布于 2015-09-14 21:52:25
您可以将flex-wrap: wrap;
添加到容器中,并设置其中元素的宽度。
然后,你应该有一个控件来决定哪些元素将停止浮动。
发布于 2016-09-15 18:55:59
您可以尝试向容器内的元素添加一个百分比为的宽度,以及属性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>
https://stackoverflow.com/questions/29280775
复制相似问题