成对的柔性包装元件

Question

我有一个Flexbox，其中有4个包含图片和文本的内部div。可以将flexbox包装为：flex-wrap: wrap

在普通笔记本电脑的屏幕中，这些项目成一行，例如：

item item item item，

当窗口缩小时，最后一个flex元素在新行中下降，如：

item item item项目

这样，我在第一行中有3个项目，在第二行中有1个项目。

我需要的是该行只能成对中断。不能连续有3个，而在新的一行中没有1个，连续只有4个，或者连续只有2/2。

我还需要使项目缩小一点，但我找到了解决方法。

<div class = "flex">

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

</div>

.flex {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.f4 {
    flex-basis: 300px;
    flex-grow: 1;
    margin: 8px;
}
.f4 img {
    max-width: 330px;
    width: 100%;
    height: auto;
}

Answer 1

您可以做的一个简单技巧就是将这2个flex一起包装起来。

使用fiddle播放以获得更多清晰度。

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

.Row {
  width: 700px;
  display: flex;
  justify-content: space-evenly;
}

.f4 {
  flex-basis: 300px;
  flex-grow: 1;
  margin: 8px;
}

.f4 img {
  max-width: 330px;
  width: 100%;
  height: auto;
}

<div class="flex">
  <div class="Row">
    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>

    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>
  </div>
  <div class="Row">
    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>

    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>
  </div>




</div>

Answer 2

请参阅以下链接。您也可以使用flex-basic:auto而不是固定宽度来做一件事，并使用设备的媒体请求

https://yoksel.github.io/flex-cheatsheet/#align-self