防止Flex-wrap 3：1案例

Question

对不起，我不知道如何写出正确的问题。但这是我想要解决的问题：

如果容器有4个项目，并且每个项目都有Flex：1 - ＆gt;然后它将通过订单定位项目：1行，包含4个项目 - ＆gt; 2行，第1行有3个项目，第2行有1个大项目---＆gt; 2行2项---＆gt;和4行。

有什么方法可以防止案件排2行，第1行有3个项，第2行有1个大项＆＃39 ;? （第二种情况）

相同的情况下，一个容器有6个项目，8个项目......等等......

以下是例子：

非常感谢。

Answer 1

最简单和最优雅的解决方案可能是将每两个项目包装在单独的flex容器中，而不包含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%;
}