如何将我的显示:flex (css) 限制为每行 2 个 div?

Question

我目前正在开发一个在框中显示一些信息的网站。我现在的目标是每行适合 2 个div 框。我这样做是为了让多个div 可以与下面的代码在同一行上，但我意识到如果我有超过 2 个，它们仍然会堆叠在同一行上。

我不完全确定如何将我的div 限制为每行 2 个。一些帮助将不胜感激！

.flex-container {
display: flex;
}
.flex-child {
flex: 1;
/*border: 2px solid yellow;*/
display: flex;
justify-content: center;
margin: 5px;
margin-top: 20px;
padding: 100px;
background: #7d7d7d;
border-radius: 30px;
margin-left: 10px;
margin-right: 10px;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-size: 50px;
color: white;
}
.flex-child:first-child {
display: flex;
justify-content: center;
margin: 5px;
margin-top: 20px;
padding: 100px;
background: #7d7d7d;
border-radius: 30px;
margin-right: 10px;
margin-left: 10px;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-size: 50px;
color: white;
}

<div class="flex-container">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>

Answer 1

你应该使用 CSS 属性flex-wrap在 flex 显示器上使用它将强制元素在一行中没有空间容纳更多元素时换行：

.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-child {
border: 2px solid yellow;
justify-content: center;
margin: 5px;
margin-top: 20px;
background: #7d7d7d;
border-radius: 30px;
margin-left: 10px;
margin-right: 10px;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
color: white;
width: calc(50% - 24px);
height: 200px;
}

<div class="flex-container">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>