CSS 如何在css flexbox中打破行（“清除”元素）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29280775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to break row ("clear" element) in css flexbox
提问by Sqrcz
Is it possible to "clear" element in a "display: flex" container?
是否可以在“display: flex”容器中“清除”元素？
I want to achieve something like this:
我想实现这样的目标：
- 20 elements in a row on a big screen
- 10 elements in a row on a smaller screen
- 5 elements in a row on a small screen
- 在大屏幕上连续显示 20 个元素
- 在较小的屏幕上连续显示 10 个元素
- 小屏幕上连续显示 5 个元素
With floats, I could "clear" after each 5th element with proper media queries...
使用浮动，我可以在每个第 5 个元素之后使用适当的媒体查询“清除”......
采纳答案by HelloWorldPeace
As @ BoltClock suggested you can "resize your flex container to accommodate the number of items on each line and let them wrap organically".
正如@ BoltClock 建议的那样，您可以“调整弹性容器的大小以容纳每行上的项目数量，并让它们有机地包装”。
If you want to actually clear a line similar to using floats you can set a margin in the direction you want to clear.
如果您想实际清除类似于使用浮动的线条，您可以在要清除的方向上设置边距。
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>回答by paolo pieretto
You can add flex-wrap: wrap;to the container and set the width of the elements inside.
您可以添加flex-wrap: wrap;到容器并设置内部元素的宽度。
Then you should have the control to decide on which elements the floating will stop.
然后您应该可以控制决定浮动将停止的元素。
回答by César Alberca
You can try to add a width with percentagesto the elements inside the container, along with the property flex-wrap: wrap. Then, with a media query, you manipulate the width of said elements given a breaking point. Here is an example:
您可以尝试为容器内的元素以及属性添加带有百分比的宽度。然后，通过媒体查询，您可以在给定断点的情况下操纵所述元素的宽度。下面是一个例子：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>