flex-wrap: wrap wickelt sich nicht, wenn ich die Browserbreite ändere

Question

Das ist also ein Problem. Ich habe alle Eigenschaften hinzugefügt. Wenn ich die Browserbreite ändere, fangen sie an, aneinander zu haften. Funktioniert nicht, weil ich zu viele Bilder habe? 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; 

} Kann nicht bekommen, warum es nicht funktioniert.

Answer 1

Sie haben dieses angegeben

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

ändern es zu beugen-Basis: 15%, und Sie können Medienabfragen verwenden, um diese Eigenschaft in einer Weise zu verändern, die besser geeignet für den mobilen/Tablet-Geräte ist.