Warum wickeln sich meine Flex-Artikel nicht?

Question

Also habe ich 3 Bilder innerhalb ihrer eigenen flex-item divs, und sie alle sitzen in einem Flex-Container div, die Bilder skalieren, wie ich das Browserfenster kleiner, aber sie alle bleiben inline statt wickeln und zu einer einzigen Spalte, irgendeine Idee, wie man sie wickelt ?. Dies ist, wie es aussieht:

/* Flexbox */ 

.intro .flex-container { 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
} 

.intro .flex-item { 
    width: 30%; 
    flex-direction: column; 
} 

.intro .img-fluid { 
    width: 90%; 
    padding: 2rem 0rem 2rem 0rem; 
} 

Vielen Dank im Voraus:

div class="intro"> 
    <section id="intro-box"> 
     <h2>In a nutshell</h2> 
     <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened 
     in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p> 
     <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand 
     beaches. 
     </p> 
     <div class="flex-container"> 
     <!--Photo from: www.santorinicrystalblue.com --> 
     <div class="flex-item"><img class="img-fluid" src="media/sontorini-greece.jpg"></div> 
     <!--Photo from: www.static2.traveltek.net --> 
     <div class="flex-item"><img class="img-fluid" src="media/santorini-view-1.jpg"></div> 
     <!--Photo from: www.mylossantorini.com--> 
     <div class="flex-item"><img class="img-fluid" src="media/santorini-restaurant.jpg"></div> 
     </div> 
    </section> 
    </div> 
</main> 

Dies ist die CSS ist!

Answer 1

Sie müssen eine Medienabfrage verwenden, um die Breite von .flex-item zu ändern. Wenn Sie dies nicht tun, werden sie immer 30% des Fensters ausmachen, so dass sie niemals umbrechen werden.

Ich fügte ein Beispiel hinzu, wo ich Ihre Bilder mit einigen Archivbildern ersetzte und eine Medienabfrage einschloss, um es bei 600px zu wickeln.

/* Flexbox */ 
 

 
.intro .flex-container { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
.intro .flex-item { 
 
    width: 30%; 
 
    flex-direction: column; 
 
} 
 

 
.intro .img-fluid { 
 
    width: 90%; 
 
    padding: 2rem 0rem 2rem 0rem; 
 
} 
 

 
@media screen and (max-width:600px) { 
 
    .intro .flex-item { 
 
    width:50%; 
 
    } 
 
}

<div class="intro"> 
 
    <section id="intro-box"> 
 
     <h2>In a nutshell</h2> 
 
     <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened 
 
     in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p> 
 
     <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand 
 
     beaches. 
 
     </p> 
 
     <div class="flex-container"> 
 

 
     <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div> 
 

 
     <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div> 
 

 
     <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div> 
 
     </div> 
 
    </section> 
 
    </div>

Answer 2

zwei Lösungen für Sie Problem ..

Sie Medienanfragen oder

verwenden, können Sie die Breite des Bildform %-px oder ähnliche Einheiten
ändern damit der Browser versucht, die angegebene Breite zu halten
Wenn die Breite in Prozent angegeben wird, wird versucht, die Größe des Bildes zu verringern oder zu vergrößern, so dass kein Platz zum Umhüllen ist.