Flexbox 没有打破界限[重复]答案

【问题标题】：Flexbox is not breaking the line [duplicate]Flexbox 没有打破界限[重复]
【发布时间】：2022-01-22 09:57:55
【问题描述】：

我正在学习 flexbox，我想制作一个如下所示的布局：

于是我做了如下代码：

.container {
  display: flex;
  gap: 26px;
}

.flex50 {
  flex: 50%;
  flex-wrap: wrap;
  min-width: calc(50% - 13px);
  background-color: #000000;
  margin-bottom: 26px;
}

.flex33 {
  flex: 33.33333%;
  flex-wrap: wrap;
  min-width: 33.33333%;
  background-color: #000000;
  margin-bottom: 26px;
}

<div class="container">
  <div class="flex50">
    1 50
  </div>
  <div class="flex50">
    2 50
  </div>
  <div class="flex33">
    1 33
  </div>
  <div class="flex33">
    2 33
  </div>
  <div class="flex33">
    3 33
  </div>
  <div class="flex33">
    4 33
  </div>
</div>

但正如您所看到的，这条线并没有像它应该的那样断线。我哪里错了？

【问题讨论】：

flex-wrap: wrap 位于父容器上，而不是 flex50 或 flex33 元素
我投票决定关闭它，因为从技术上讲，这是一个错误元素上的 flex-wrap 属性的错字。

标签： html css flexbox

【解决方案1】：

将 flex-wrap: wrap 属性添加到 .container 类，以便 flex 在超出视口时可以自行包装。

.container{
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}
.flex50{
    flex: 50%;
    flex-wrap: wrap;
    min-width: calc(50% - 13px);
  background-color: #000000;
    margin-bottom: 26px;
}
.flex33{
    flex: 33.33333%;
    flex-wrap: wrap;
    min-width: 33.33333%;
    background-color: #000000;
    margin-bottom: 26px;
}

<div class="container">
    <div class="flex50">
        1 50
    </div>
    <div class="flex50">
        2 50
    </div>
    <div class="flex33">
        1 33
    </div>
    <div class="flex33">
        2 33
    </div>
    <div class="flex33">
        3 33
    </div>
    <div class="flex33">
        4 33
    </div>
</div>

【讨论】：

请花时间解释您所做的更改，以便他们可以向您和您的答案学习。
所以我添加了 flex-wrap: wrap;到 .container 类，以便 flex 在超出范围时中断。想学flex的可以去flexboxfroggy.com
不，我很擅长使用 flex，但谢谢。另一方面，如果您 edit 您的答案包含该信息，则 OP 和任何未来的访问者更有可能了解，cmets 是暂时的并且容易被删除。从长远来看，它们也不应该是理解答案所必需的。

【解决方案2】：

将 flex-wrap: wrap 属性添加到 .container 类，以便 flex 在超出视口时可以自行包装。

.container{
    height: 20rem; /* set some height, can be any height that you need */
    display: flex;
    flex-wrap: wrap; 
}
.flex50{
    flex-basis: 50%;
    background-color: #000000;
    margin-bottom: 26px;
    margin: 0.5rem; /* sets some separation between elements */
    max-width: calc(50% - 1rem); /* includes margin in elemets width */
}
.flex33{
    flex-basis: 33.33333%;
    background-color: #000000;
    margin-bottom: 26px;
    margin: 0.5rem; /* sets some separation between elements */
    max-width: calc(33.3333% - 1rem); /* includes margin in elemets width */
}

<div class="container">
    <div class="flex50">
        1 50
    </div>
    <div class="flex50">
        2 50
    </div>
    <div class="flex33">
        1 33
    </div>
    <div class="flex33">
        2 33
    </div>
    <div class="flex33">
        3 33
    </div>
    <div class="flex33">
        4 33
    </div>
</div>

【讨论】：