如何将我的柔性盒分割成一定的大小:第1行3次，第2行2次？

Question

我在做一个网站。我有一个带有一些物品的挠曲箱。它们对屏幕大小有反应。见下面的图片。

现在我要把我的屏幕变小，它变成这样：

当我的屏幕再次变小时，它变成这样：

我认为图片1和3看起来很棒，但是图片2没有，因为分割。所以我希望如果屏幕大小和图2一样大，第一行的一张图片将转到第二行，所以分割更好。所以我不想在第1行和第2行有4张照片，相反，我希望第1行有前5张，当我使屏幕变小时，第1行和第2行有3张，这样看起来更有吸引力，我认为。有谁能让我这么做吗？

​

.sec-2 {
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.flip-card {
    margin-top: 50px;
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
    position: relative;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
    transform: rotateX(180deg);
}
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-back {
    background-color: blue;
    color: black;
    transform: rotateX(180deg);
}
.flip-card-back h3{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.flip-card-front h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 50px;
}
.moed, .beleid, .eer, .trouw, .trots{
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: center center;
}
.moed{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/moed.jpg"); 
}
.beleid{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/beleid.jpg"); 
}
.eer{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/eer.jpg"); 
}
.trouw{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/trouw.jpg"); 
}
.trots{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/trots.jpg"); 
}

<div class="sec-2" id="scroll">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div class="moed"></div>
                        <h1>Moed</h1>
                    </div>
                    <div class="flip-card-back">
                        <h3>De commando doet wat noodzakelijk is, ongeacht de consequenties voor hemzelf.</h3>
                    </div>
                </div>
            </div>

            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div class="beleid"></div>
                        <h1>Beleid</h1>
                    </div>
                    <div class="flip-card-back">
                        <h3>Doortastend handelen, onconventioneel en verrassend. De commando is altijd bereid verantwoording af te leggen voor wat hij doet.</h3>
                    </div>
                </div>
            </div>

            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div class="eer"></div>
                        <h1>Eer</h1>
                    </div>
                    <div class="flip-card-back">
                        <h3>Het is onze eer te na op te geven en niet het beste uit onszelf te halen.</h3>
                    </div>
                </div>
            </div>

            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div class="trouw"></div>
                        <h1>Trouw</h1>
                    </div>
                    <div class="flip-card-back">
                        <h3>Trouw aan je opdracht, trouw aan je kameraden, trouw aan het Korps, trouw aan jezelf.</h3>
                    </div>
                </div>
            </div>

            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div class="trots"></div>
                        <h1>Trots</h1>
                    </div>
                    <div class="flip-card-back">
                        <h3>Trots op ons Korps, onze geschiedenis, tradities en daden.</h3>
                    </div>
                </div>
            </div>
        </div>

​

Answer 1

使用media query和margin

​

.sec-2 {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.flip-card {
  margin-top: 50px;
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  position: relative;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  background-color: blue;
  color: black;
  transform: rotateX(180deg);
}

.flip-card-back h3 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.flip-card-front h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 50px;
}

.moed,
.beleid,
.eer,
.trouw,
.trots {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center center;
}

.moed {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/moed.jpg");
}

.beleid {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/beleid.jpg");
}

.eer {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/eer.jpg");
}

.trouw {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/trouw.jpg");
}

.trots {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/trots.jpg");
}

@media screen and (max-width: 1400px) {
  .flip-card {
    margin: 50px 50px 0 50px;
  }
}

<div class="sec-2" id="scroll">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="moed"></div>
        <h1>Moed</h1>
      </div>
      <div class="flip-card-back">
        <h3>De commando doet wat noodzakelijk is, ongeacht de consequenties voor hemzelf.</h3>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="beleid"></div>
        <h1>Beleid</h1>
      </div>
      <div class="flip-card-back">
        <h3>Doortastend handelen, onconventioneel en verrassend. De commando is altijd bereid verantwoording af te leggen voor wat hij doet.</h3>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="eer"></div>
        <h1>Eer</h1>
      </div>
      <div class="flip-card-back">
        <h3>Het is onze eer te na op te geven en niet het beste uit onszelf te halen.</h3>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="trouw"></div>
        <h1>Trouw</h1>
      </div>
      <div class="flip-card-back">
        <h3>Trouw aan je opdracht, trouw aan je kameraden, trouw aan het Korps, trouw aan jezelf.</h3>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="trots"></div>
        <h1>Trots</h1>
      </div>
      <div class="flip-card-back">
        <h3>Trots op ons Korps, onze geschiedenis, tradities en daden.</h3>
      </div>
    </div>
  </div>
</div>

​