防止 Flex-wrap 3:1 案例

Question

很抱歉我不知道如何写出正确的问题。但这是我想解决的问题：

如果容器有 4 个项目，每个项目的 Flex:1 --> 那么它将按照以下顺序定位项目：1 行有 4 个项目 --> 2 行，第 1 行有 3 个项目，行中有 1 个大项目2 ---> 2 行，有 2 个项目 ---> 和 4 行。

有什么办法可以防止出现“2 行，第 1 行有 3 个项目，第 2 行有 1 个大项目”的情况？ （第二种情况）

同一个箱子，一个容器有 6 件物品，8 件物品，...等等....

示例如下：

非常感谢。

Answer 1

最简单和优雅的解决方案可能是将每两个项目包装在单独的弹性容器中，没有

flex-wrap: wrap;

：

.flex-outer {
  display: flex;
  flex-wrap: wrap;
}

/* no row-wrapping here */
/* just leave it with default flex-wrap: nowrap */
.flex-inner {
  display: flex;
}

/* Just styles for demo */
.flex-item {
  width: 200px;
  height: 100px;
  background-color: orange;
  color: white;
  font-size: 3rem;
}

<div class="flex-outer">
  <div class="flex-inner">
    <div class="flex-item">
      One
    </div>

    <div class="flex-item">
      Two
    </div>
  </div>
  
  <div class="flex-inner">
    <div class="flex-item">
      Three
    </div>

    <div class="flex-item">
      Four
    </div>
  </div>
</div>

如果您希望项目占据所有剩余空间，请将

flex: 1;

设置为

.flex-item

和

.flex-inner

。

Answer 2

我通过这种方式实现了你所需要的...... 首先，我将 Flex 声明应用于包装图像的 div。

<div class="wrap">

    <p>picture</p>
    <p>picture</p>
    <p>picture</p>
    <p>picture</p>

</div>

.wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
}

然后我使用了flex属性，它是flex的简写：(flex-grow) (flex-shrink) (flex-basis)。请注意，flex-basis 设置为 50%。这意味着该元素将占据视口的一半。

.wrap p {
    flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
}