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

Posted 2023-03-05

【中文标题】如何将我的 display:flex (css) 限制为每行 2 个 div？ [复制]

【英文标题】：How might I limit my display:flex (css) to 2 divs per line? [duplicate]

【发布时间】：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>

【参考方案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>