css - Gaps in responsive flex layout -
i've made responsive flex layout: 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 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%; } { position: relative; } @media (max-width: 600px) { .sectiontop { flex-direction: column; } #bigzufall { flex-basis: 280px; } #wrapperrechts { flex-basis: 280px; } } works fine far, when width of window made small, gaps appear between elements. don't understand relevant element have flex-shrink:1. can explain , advice how fix this?
you using fix flex-basis flex-items flexible in width changed auto use available space have.
css changes
@media (max-width: 600px) { .sectiontop { flex-direction: column; } #bigzufall { flex-basis: auto; /* change auto */ } #wrapperrechts { flex-basis: auto; /* change 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%; } { 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 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>
Comments
Post a Comment