跨多行打破列表项的行

Question

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

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

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

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

Answer 1

flex 容器的初始设置是flex-wrap: nowrap. 这意味着 flex 项目被迫保持在一行上。这是你遇到的主要问题。

您可以使用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>