フレックスラップ：ブラウザの幅を変更しているときにラップが折り返されない

Question

これは問題です。 すべてのプロパティを追加しました。 ブラウザの幅を変更しているときに、互いの間に固執し始めます。 イメージが多すぎるために動作しません。 Can't wrap images to new line

<section id="skills"> 
     <h3>skills</h3> 
     <div> 
     <div><img src="./img/python.png"><h5>Python</h5></div> 
     <div><img src="./img/js.png"><h5>Javascript</h5></div> 
     <div><img src="./img/vue.png"><h5>Vue.js</h5></div> 
     <div><img src="./img/nodejs.png"><h5>Node.js</h5></div> 
     <div><img src="./img/mongodb.png"><h5>MongoDB</h5></div> 
     <div><img src="./img/express.png"><h5>Express.js</h5></div> 
     <div><img src="./img/babel.png"><h5>Babel.js</h5></div> 
     <div><img src="./img/npm.png"><h5>NPM</h5></div> 
     <div><img src="./img/html.png"><h5>HTML</h5></div> 
     <div><img src="./img/css.png"><h5>CSS</h5></div> 
     <div><img src="./img/sass.png"><h5>Sass</h5></div> 
     <div><img src="./img/boostrap.png"><h5>Bootstrap</h5></div> 
     <div><img src="./img/jquery.png"><h5>Jquery</h5></div> 
     <div><img src="./img/ajax.png"><h5>Ajax</h5></div> 
     <div><img src="./img/restful.png"><h5>RESTful</h5></div> 
     <div><img src="./img/heroku.png"><h5>Heroku</h5></div> 
     </div> 
    </section> 

CSS

#skills>div{ 
    margin-top:80px; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-between; 

} それが機能しない理由を取得することはできません。

Answer 1

あなたはそれが、基礎を曲げるためにこの

#skills > div > div { 
    width: 15%; 
} 

変更指定している：15％、そしてあなたは、モバイル/タブレットデバイスのためのより適切な方法でそのプロパティを変更するメディアクエリを使用することができます。