Question

我做了这个响应式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;
  }
}

到目前为止工作正常，但是当窗口的宽度非常小时，元素之间会出现一些间隙。不要理解这一点，因为相关元素具有弹性收缩：1。任何人都可以解释和建议如何解决这个问题吗？

Answer 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>

Answer 2

由于媒体查询中的flex-basis值较高而显示空格

只是降低值，如下：

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

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

响应式弹性布局的差距

2 个答案: