如何在css flexbox中断开行(“清除”元素)
如何在css flexbox中断开行(“清除”元素)
提问于 2015-03-26 22:15:54
是否可以“清除”"display: flex“容器中的元素？
我想要达到这样的效果：
- 在大屏幕上连续20个元素
- 在小屏幕上连续10个元素
- 在小屏幕上连续5个元素
有了浮动，我可以用适当的媒体查询在每5个元素后“清除”…
回答 3
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 2015-09-14 21:52:25
您可以将flex-wrap: wrap;添加到容器中，并设置其中元素的宽度。
然后，你应该有一个控件来决定哪些元素将停止浮动。
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29280775
复制相关文章
相似问题