如何将我的 display:flex (css) 限制为每行 2 个 div？ [复制]答案

【问题标题】：How might I limit my display:flex (css) to 2 divs per line? [duplicate]如何将我的 display:flex (css) 限制为每行 2 个 div？ [复制]
【发布时间】：2020-09-08 19:43:45
【问题描述】：

我目前正在开发一个在框中显示一些信息的网站。我现在的目标是在每行上放置 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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你应该使用flex-wrap CSS 属性，当一行中没有更多元素的空间时，在弹性显示上使用它会强制元素换行：

.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>

【讨论】：