Flexbox 并没有打破界限

Question

我正在研究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>

但是如您所见，线并没有按预期断开。我哪里错了？

Answer 1

添加 flex-wrap：将属性包装到 .container class 以便 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>

Answer 2

添加 flex-wrap：将属性包装到 .container class 以便 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>

Flexbox 并没有打破界限

Flexbox is not breaking the line

html

css

flexbox