响应式弹性布局中的差距答案

【问题标题】：Gaps in responsive flex layout响应式弹性布局中的差距
【发布时间】：2018-01-01 10:49:02
【问题描述】：

我制作了这个响应式 flex 布局： https://jsfiddle.net/Sempervivum/hvo59tyq/11/

HTML

        <div id="bigzufall" class="grosslinks">
            <a href="videos/do-that-baby-mama.php">
                <img src="http://lorempixel.com/output/people-q-c-360-280-6.jpg">      
                                <div class="ueberschrift">
                    <p>Do that Baby Mama! Müdigkeit in der Schwangerschaft? Von wegen...</p>                                    
                                </div>
                </a>
        </div>
  <div id="wrapperrechts">

            <div id="obenmittezufall" class="rechtsklein">
            <a href="videos/du-wirst-papa.php">
                <img src="http://lorempixel.com/output/people-q-c-180-140-5.jpg">      
                                <div class="ueberschrift">
                    <p>Du wirst Papa! Männer erfahren, dass Sie Vater werden.</p>                                       
                                </div>
                </a>
        </div>

            <div id="obenrechtszufall" class="rechtsklein">
            <a href="videos/junge-rettet-seinem-zwillingsbruder-das-leben.php">
                <img src="http://lorempixel.com/output/people-q-c-180-140-4.jpg">      
                                <div class="ueberschrift">
                    <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>                                    
                                </div>
                </a>
        </div>

            <div id="untenmittezufall" class="rechtsklein">             
            <a href="test/junge-rettet-seinem-zwillingsbruder-das-leben - Kopie (2).php">
                <img src="http://lorempixel.com/output/people-q-c-180-140-3.jpg">      
                                <div class="ueberschrift">
                    <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>                                    
                                </div>
                </a>
        </div>

        <div id="untenrechtszufall" class="rechtsklein">
            <a href="test/junge-rettet-seinem-zwillingsbruder-das-leben - Kopie (3).php">
                <img src="http://lorempixel.com/output/people-q-c-180-140-2.jpg">      
                                <div class="ueberschrift">
                    <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>                                    
                                </div>
                </a>
        </div>

      </div>

  </div>

CSS：

.sectiontop {
  display: flex;
}
#bigzufall {
  flex-basis: 360px;
  flex-grow: 0;
  flex-shrink: 1;
}
#wrapperrechts {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 360px;
  flex-grow: 0;
  flex-shrink: 1;
}
.rechtsklein {
  flex-basis: 50%;
  flex-shrink: 1;
  position: relative;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.ueberschrift {
  position: absolute;
  color: white;
  bottom: 0;
}
.ueberschrift p {
  text-align: center;
  padding: 5%;
}
a {
  position: relative;
}
@media (max-width: 600px) {
  .sectiontop {
    flex-direction: column;
  }
  #bigzufall {
    flex-basis: 280px;
  }
  #wrapperrechts {
    flex-basis: 280px;
  }
}

到目前为止工作正常，但是当窗口的宽度非常小时，元素之间会出现一些间隙。不明白这一点，因为相关元素有 flex-shrink:1。谁能解释和建议如何解决这个问题？

【问题讨论】：

标签： css responsive-design flexbox

【解决方案1】：

您正在使用修复 flex-basis，因此 flex-items 在宽度上很灵活，我将其更改为 auto 以使用它们拥有的可用空间。

Fiddle link also included

CSS 变化

@media (max-width: 600px) {
  .sectiontop {
    flex-direction: column;
  }
  #bigzufall {
    flex-basis: auto;          /* change it into auto */
  }
  #wrapperrechts {
    flex-basis: auto;         /* change it into auto */
  }
}

.sectiontop {
  display: flex;
}

#bigzufall {
  flex-basis: 360px;
  flex-grow: 0;
  flex-shrink: 1;
}

#wrapperrechts {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 360px;
  flex-grow: 0;
  flex-shrink: 1;
}

.rechtsklein {
  flex-basis: 50%;
  flex-shrink: 1;
  position: relative;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.ueberschrift {
  position: absolute;
  color: white;
  bottom: 0;
}

.ueberschrift p {
  text-align: center;
  padding: 5%;
}

a {
  position: relative;
}

@media (max-width: 600px) {
  .sectiontop {
    flex-direction: column;
  }
  #bigzufall {
    flex-basis: auto;
    /* change*/
  }
  #wrapperrechts {
    flex-basis: auto;
    /* change*/
  }
}

<div class="sectiontop">

  <div id="bigzufall" class="grosslinks">
    <a href="videos/do-that-baby-mama.php">
      <img src="http://lorempixel.com/output/people-q-c-360-280-6.jpg">
      <div class="ueberschrift">
        <p>Do that Baby Mama! Müdigkeit in der Schwangerschaft? Von wegen...</p>
      </div>
    </a>
  </div>
  <div id="wrapperrechts">

    <div id="obenmittezufall" class="rechtsklein">
      <a href="videos/du-wirst-papa.php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-5.jpg">
        <div class="ueberschrift">
          <p>Du wirst Papa! Männer erfahren, dass Sie Vater werden.</p>
        </div>
      </a>
    </div>

    <div id="obenrechtszufall" class="rechtsklein">
      <a href="videos/junge-rettet-seinem-zwillingsbruder-das-leben.php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-4.jpg">
        <div class="ueberschrift">
          <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>
        </div>
      </a>
    </div>

    <div id="untenmittezufall" class="rechtsklein">
      <a href="test/junge-rettet-seinem-zwillingsbruder-das-leben - Kopie (2).php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-3.jpg">
        <div class="ueberschrift">
          <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>
        </div>
      </a>
    </div>

    <div id="untenrechtszufall" class="rechtsklein">
      <a href="test/junge-rettet-seinem-zwillingsbruder-das-leben - Kopie (3).php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-2.jpg">
        <div class="ueberschrift">
          <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>
        </div>
      </a>
    </div>

  </div>

</div>

【讨论】：

@Cătălin Costan 非常感谢您的建议。确实，这消除了差距，但是我不完全理解它们出现的原因：我将 flex-shrink: 1 应用于该容器，并且在一定程度上它可以正常工作。收缩是否限制在一定范围内？
我只是编辑，@LKG 是人。然而，它们出现是因为存放物品的容器的高度不能低于flex-basis 指定的高度
感谢您提供此信息！

【解决方案2】：

出现空格是因为媒体查询中flex-basis 的值较高

只需降低值，如下所示：

@media (max-width: 600px) {
  .sectiontop {
    flex-direction: column;
  }
  #bigzufall {
    flex-basis: 100px;
  }
  #wrapperrechts {
    flex-basis: 50px;
  }

并且还为.sectiontop 提供min-width，因为您希望文本仍然可读

【讨论】：