html - 将列表项的行分成多行

我正在创建一个内联无序列表，但项目只是一直在水平直接迭代。

我想要的是先内联创建三个项目，然后再创建下面的三个项目。

我的创作的问题在于，它一直在一行中水平迭代。

.product {
  width: 200px;
  height: 300px;
  background-color: green;
}
.product_area {
  display: inline;
}
.product_ul {
  display: flex;
  list-style-type: none;
}

<div class="product_area">
  <ul class="product_ul">
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
      <li><div class="product"></div></li>
  </ul>
</div>

这是我的小提琴:https://jsfiddle.net/29qvekLz/2/

最佳答案

flex容器的初始设置是flex-wrap: nowrap。这意味着弹性项目被迫停留在一行上。那是您遇到的主要问题。

您可以使用flex-wrap: wrap覆盖默认值。

.product_ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0;
}

li {
  flex: 0 0 30%; /* flex-grow, flex-shrink, flex-basis */
  height: 100px;
  background-color: green;
  margin: 5px;
}

<div class="product_area">
  <ul class="product_ul">
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
    <li><div class="product"></div></li>
  </ul>
</div>

关于html - 将列表项的行分成多行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41229888/