中断多行列表项的行

Question

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

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

我创建的问题是它在一行中水平迭代。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

Flex容器的初始设置为flex-wrap: nowrap。这意味着弹性项目被迫保持在一条线上。这是您遇到的主要问题。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;