html - 我如何限制我的显示 :flex (css) to 2 divs per line?

Question

这个问题在这里已经有了答案:





Flexbox: 4 items per row

(9 个回答)


去年关闭。




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

您应该使用 flex-wrap CSS 属性，在 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>