css - flex 包装 :wrap doesn't wrap when I am changing browser's width

Question

我已经添加了所有属性。当我更改浏览器宽度时，它们开始相互粘连，这是因为我有太多图像而无法正常工作？

无法将图像换行:

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

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

不明白为什么它不起作用。

Answer 1

你已经指定了这个

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

将其更改为 flex-basis: 15%，您可以使用媒体查询以更适合移动/平板设备的方式更改该属性。