フレックスアイテムがラッピングしないのはなぜですか？

Question

私は自分のフレックスアイテムのdiv内に3つの画像を追加しました。フレックスコンテナdiv内にすべて座っています。ブラウザウィンドウを小さくすると画像が拡大しますが、列、どのようにそれらをラップするかについての任意のアイデア？これは、それがどのように見えるかです：事前に

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

ありがとう：

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です！

Answer 1

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

Answer 2

2つのソリューション..あなたは、メディアクエリを使用することができます

または

あなたが%pxまたは類似のユニット
に画像形式の幅を変更することができますブラウザは指定された幅を維持しようとします
幅がパーセンテージで与えられている場合、イメージのサイズを縮小または拡大しようとします。したがって、折り返すスペースはありません。