Html 使用 flexbox 将元素包装到新的行/行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32617066/
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
Wrap element to new line/row using flexbox
提问by billybobjones
I have trouble forcing an item into the next row in a flexbox layout.
在 flexbox 布局中，我无法将一个项目强制到下一行。
How can I do something like the following image?
我怎样才能做类似下图的事情？
This is what I got so far:
这是我到目前为止得到的：
#wrap {
display: flex;
width: 86vw;
height: auto;
box-sizing: border-box;
margin: 0 auto;
}
.item1,
.item2 {
width: 50%;
height: 24.5vw;
background: #4add69;
}
.item1 {
margin-right: 10px;
}
.item2 {
margin-left: 10px;
}
.item3 {
width: 60%;
height: 40vw;
background: #d56c6c;
}<div id="wrap">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>回答by Manoj Kumar
Your code is fine but missing two things.
您的代码很好，但缺少两件事。
Use
flex-wrap: wrapto create a new row. Modify the width of the first two items to be present in a single row.For the last two items, you need to nest it inside a container and then wrap them again.
使用
flex-wrap: wrap创建一个新的行。修改出现在一行中的前两项的宽度。对于最后两个项目，您需要将其嵌套在容器中，然后再次包装它们。
Manipulate the dimension(width, height) and margin values to achieve the perfect/suitable layout.
操纵尺寸（宽度，高度）和边距值以实现完美/合适的布局。
* {
margin: 0;
padding: 0;
}
body {
background: #232323;
padding: 10px;
}
#wrap {
display: flex;
width: 86vw;
height: auto;
box-sizing: border-box;
margin: 0 auto;
flex-wrap: wrap;
background: #232323;
/* Added */
}
.item1,
.item2 {
width: 48%;
/* Modified */
height: 24.5vw;
background: #4add69;
margin-bottom: 10px;
}
.item1 {
margin-right: 10px;
}
.item2 {
margin-left: 10px;
}
.item3 {
width: 55%;
height: 40vw;
background: #d56c6c;
margin-right: 10px;
}
.nested-items {
display: flex;
width: 42%;
flex-wrap: wrap;
align-content: space-between;
}
.item4,
.item5 {
background: lightblue;
width: 100%;
height: 49%;
}<div id="wrap">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="nested-items">
<div class="item4"></div>
<div class="item5"></div>
</div>
</div>回答by Paulie_D
Essentially you need an extra wrapping div for the two 'small' elements like so:
本质上，您需要为两个“小”元素添加一个额外的包装 div，如下所示：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 75%;
margin: 1em auto;
border: 1px solid green;
padding: .25em;
display: flex;
flex-wrap: wrap;
}
.wrap div {
border: 1px solid grey;
margin-bottom: 1px;
}
.box {
height: 80px;
background: lightblue;
flex: 0 0 50%;
}
.tall {
flex: 0 0 65%;
height: 160px;
}
.col {
flex: 0 0 35%;
display: flex;
flex-wrap: wrap;
}
.mini {
flex: 0 0 100%;
height: 80px;
background: pink;
}<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box tall"></div>
<div class="box col">
<div class="mini"></div>
<div class="mini"></div>
</div>
</div>I've used a single overall element here with wrapping but the image suggests that this would be much simpler with actual rows and the extra wrapper mentioned before.
我在这里使用了一个带有包装的整体元素，但图像表明使用实际行和前面提到的额外包装会更简单。
Codepen Demoof 2nd option with rows.
带有行的第二个选项的Codepen 演示。
