爲什麼我的柔性物品不能包裝？

因此，我在他們自己的flex-item div中添加了3張圖片，並且它們都坐在flex-container div中，圖片比例縮小，因爲我將瀏覽器窗口縮小了，但它們都保持內聯而不是包裝併成爲單個專欄，關於如何使它們包裝的任何想法？這是它的外觀：爲什麼我的柔性物品不能包裝？

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>

這是CSS：提前

/* 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; 
}

謝謝！

來源

2017-06-25 AKL012

您正在告訴flex項目具有'width：30％'。這是父級（flex容器）的30％。所以，即使父母是6px寬，每個項目將佔30％，他們將永遠不會換行。而是使用固定寬度或媒體查詢。 –

您需要使用媒體查詢來更改.flex-item的寬度。除非你這樣做，否則它總是會使它們成爲窗戶的30％，所以它們永遠不會環繞。

我包括一個例子，其中我用一些庫存圖像替換了您的圖像，並且包含了一個媒體查詢以使其包裝在600px。你的問題

/* 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>

來源

2017-06-25 02:13:35

兩種解決方案..

您可以使用媒體查詢或

可以圖像格式的寬度改變%到px或類似的單位
以便瀏覽器將嘗試保持給定的寬度
如果以百分比給出寬度，它會嘗試減小或增加圖像的大小，因此沒有空間進行換行

來源

2017-06-25 02:59:50 bhv

爲什麼我的柔性物品不能包裝？

回答

相關問題